Cara mengubah suai status komponen dalam tindak balas

Sebagai tindak balas, anda boleh menggunakan setState() untuk mengubah suai keadaan komponen setState() ialah kaedah yang digunakan untuk mengemas kini keadaan komponen Kaedah ini boleh membuat baris gilir perubahan kepada keadaan komponen dan juga mendapatkan yang terkini Keadaan, sintaksnya ialah "setState(pengemas kini, [fungsi panggil balik])".

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Cara mengubah suai keadaan komponen dalam tindak balas

Dalam React, keadaan komponen tidak boleh diubah suai secara langsung Ia perlu diubah suai melalui setState()

In react , setstate digunakan untuk Kaedah untuk mengemas kini keadaan komponen; setState() mengubah keadaan komponen dan memberitahu React bahawa ia perlu memaparkan semula komponen ini dan subkomponennya menggunakan keadaan yang dikemas kini Sintaksnya ialah "setState(objek, [fungsi panggilan balik ]) ".

Sintaks:

setState(updater[, callback])

pengemas kini pengemaskini

fungsi panggil balik panggil balik dilaksanakan selepas kemas kini

Ubah suai status

Sebagai contoh, jika anda ingin mengubah suai nilai kandungan dalam negeri kepada 'Xiangxiang'

state = {
  content: '大熊'
}

Pengubahsuaian langsung tidak mencetuskan kemas kini paparan:

this.state.content = '香香'

Anda perlu untuk lulus setState untuk membuat pengubahsuaian:

this.setState({
  content: '香香'
})

Dapatkan nilai status terkini

Oleh kerana setState() adalah tak segerak, anda mungkin tidak boleh mendapatkan status terkini nilai selepas mengubahnya. Jika anda ingin mendapatkan nilai status terkini, anda boleh menyediakan fungsi panggil balik untuk setState().

Contoh:

this.setState({
  content: '香香'
}, () => {
  // 通回调获取最新的状态
  console.log(this.state.content)
})

Parameter pertama setState() juga boleh menjadi fungsi Fungsi ini menerima dua parameter: parameter pertama ialah nilai keadaan sebelum kemas kini, dan parameter kedua ialah prop (. komponen induk boleh diperolehi data yang diluluskan); borang ini boleh digunakan apabila mengubahsuai keadaan melibatkan nilai keadaan sebelumnya.

this.setState((state, props) => {
  console.log(state.content, props)
  // 返回一个对象
  return {
    content: prev.content + '香香'
  }
})

Pembelajaran yang disyorkan: "

tutorial video bertindak balas"

Atas ialah kandungan terperinci Cara mengubah suai status komponen dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!