Mengapa saya mendapat amaran \"Satu komponen sedang menukar input teks jenis yang tidak terkawal untuk dikawal\" dalam apl ReactJS saya?

Elemen Input Tidak Terkawal dan Terkawal: Panduan untuk Amaran ReactJS

ReactJS mengesyorkan mengekalkan ketekalan dalam keadaan kawalan elemen input. Dalam senario tertentu, anda mungkin menghadapi amaran: "Satu komponen sedang menukar input teks jenis yang tidak terkawal untuk dikawal." Mari kita mendalami punca dan meneroka penyelesaian yang berkesan.

Akar Masalah

Dalam ReactJS, elemen input boleh dikawal atau tidak dikawal. Input terkawal ialah input yang nilainya diuruskan oleh keadaan komponen, manakala input tidak terkawal membolehkan pengguna menukar nilainya secara langsung. Masalah timbul apabila input yang pada mulanya diisytiharkan sebagai tidak terkawal kemudiannya dialihkan kepada input terkawal.

Pertimbangkan kod berikut:

kelas MyComponent memanjangkan React.Component {
pembina(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>
    <input
      value={this.state.fields["name"]}
      onChange={this.onChange.bind(this, "name")}
      type="text"
      placeholder="Name *"
    />
  </div>
)

}
}

Dalam contoh ini, input 'nama' tidak dikawal kerana nilainya pada mulanya tidak ditentukan (this.state. medan ["nama"]), membenarkan pengguna menukarnya dengan bebas. Walau bagaimanapun, apabila pengguna memasukkan nilai, pengendali onChange menetapkan this.state.fields.name, dengan berkesan mengalihkan input kepada keadaan terkawal. Peralihan keadaan ini mencetuskan amaran.

Mengatasi Isu

Untuk menyelesaikan amaran, anda boleh sama ada:

1. Tentukan medan awal dalam keadaan: Isytihar this.state.fields dengan rentetan kosong untuk setiap medan. Ini memastikan semua input dikawal pada mulanya.

   <code class="python">class MyComponent extends React.Component {
     constructor(props) {
    super(props);
    this.state = {
      fields: {
        name: '',
      }
    }
     }
   
     // ...
   }</code>

2. Gunakan penilaian litar pintas: Tetapkan prop nilai menggunakan penilaian litar pintas, yang memastikan bahawa tidak ditentukan nilai menilai kepada rentetan kosong.

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

Dengan melaksanakan salah satu penyelesaian, anda boleh menghapuskan ralat dan memastikan ketekalan dalam keadaan kawalan input anda.

Atas ialah kandungan terperinci Mengapa saya mendapat amaran \"Satu komponen sedang menukar input teks jenis yang tidak terkawal untuk dikawal\" dalam apl ReactJS saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!