Bagaimana untuk Mengelakkan \"Input Tidak Terkawal kepada Ralat Peralihan Input Terkawal\" dalam ReactJS?

Ralat Peralihan Input Tidak Terkawal kepada Input Terkawal dalam ReactJS

React memberi amaran terhadap pertukaran antara elemen input yang tidak terkawal dan terkawal. Ralat ini biasanya berlaku apabila medan input pada mulanya menerima input pengguna secara bebas (tidak terkawal) dan kemudian pembangun cuba mengawal nilainya melalui keadaan (terkawal).

Coretan Kod:

Ralat digambarkan oleh kod berikut:

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

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")}
        className="form-control"
        type="text"
        refs="name"
        placeholder="Name *"
      />
    </div>
  )
}</code>

Punca Punca:

Dalam kod ini, isunya terletak pada keadaan awal di mana medan berada dimulakan sebagai objek kosong. Apabila komponen pertama kali dipaparkan, this.state.fields.name tidak ditentukan, menjadikan input sebagai komponen yang tidak terkawal. Walau bagaimanapun, apabila pengguna memasukkan nilai, medan dikemas kini, menjadikan input dikawal.

Penyelesaian Kemungkinan:

Untuk menyelesaikan ralat ini, terdapat dua pilihan:

1. Mulakan medan dengan Nilai Lalai:

   Tentukan medan dalam keadaan awal dengan nilai lalai:

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

2. Gunakan Penilaian Litar pintas:

   Gunakan penilaian litar pintas dalam atribut nilai untuk memberikan nilai lalai apabila this.state.fields.name tidak ditentukan:

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

Atas ialah kandungan terperinci Bagaimana untuk Mengelakkan \"Input Tidak Terkawal kepada Ralat Peralihan Input Terkawal\" dalam ReactJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!