Bagaimana untuk Membetulkan Amaran \'Tidak Terkawal kepada Penukaran Input Terkawal\' dalam ReactJS?

Mengendalikan Amaran Penukaran Input Tidak Terkawal dalam ReactJS

ReactJS memberi amaran kepada pembangun apabila komponen mengalihkan elemen input tidak terkawal kepada elemen terkawal. Ralat ini dikaitkan dengan mesej berikut:

Amaran: Komponen sedang menukar input teks jenis yang tidak terkawal untuk dikawal. Elemen input tidak boleh bertukar daripada tidak terkawal kepada terkawal (atau sebaliknya). Tentukan antara menggunakan elemen input terkawal atau tidak terkawal untuk sepanjang hayat komponen.

Memahami Punca

Ralat berlaku apabila keadaan komponen memulakan medan input sebagai tidak terkawal (iaitu, tidak mempunyai prop nilai terkawal) tetapi kemudian menetapkan nilainya, dengan berkesan mengalihkannya kepada input terkawal.

Kod Contoh

Pertimbangkan coretan kod berikut:

<code class="javascript">constructor(props) {
  super(props);
  this.state = {
    fields: {}
  }
}

...

onChange(field, e){
  let fields = this.state.fields;
  fields[field] = e.target.value;
  this.setState({fields});
}

...

render() {
  return(
    <div className="form-group">
      <input
        value={this.state.fields["name"]}
        onChange={this.onChange.bind(this, "name")}
        type="text"
        refs="name"
        placeholder="Name *"
      />
    </div>
  )
}</code>

Dalam contoh ini, keadaan pada mulanya ialah objek kosong, menjadikan medan input tidak terkawal. Walau bagaimanapun, apabila nilai medan ditetapkan, input menjadi terkawal, menyebabkan amaran.

Penyelesaian Kemungkinan

Untuk menyelesaikan isu, pertimbangkan penyelesaian berikut:

1. Memulakan Nilai Medan dalam Keadaan: Tentukan medan input dalam keadaan awal dengan nilai pemegang tempat. Contohnya:

<code class="javascript">this.state = { fields: { name: '' } }</code>

2. Gunakan Penilaian Litar pintas: Tetapkan prop nilai menggunakan penilaian litar pintas untuk mengendalikan nilai yang tidak ditentukan. Contohnya:

<code class="javascript">value={this.state.fields.name || ''}</code>

Dengan melaksanakan penyelesaian ini, anda boleh memastikan elemen input anda kekal dalam keadaan yang konsisten, mengelakkan ralat penukaran input yang tidak terkawal kepada terkawal.

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Amaran \'Tidak Terkawal kepada Penukaran Input Terkawal\' dalam ReactJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!