Bagaimana untuk menggunakan setState untuk mengemas kini state.item dalam keadaan?
P粉464208937
2023-08-23 17:35:11
<p>Saya sedang mencipta aplikasi di mana pengguna boleh mereka bentuk borang mereka sendiri. Sebagai contoh. Nyatakan nama medan dan butiran lajur lain yang perlu disertakan. </p>
<p>Komponen ini tersedia sebagai JSFiddle. </p>
<p>Keadaan awal saya kelihatan seperti ini:</p>
<pre class="brush:php;toolbar:false;">var DynamicForm = React.createClass({
getInitialState: function() {
var item = {};
item[1] = { name: 'field 1', populate_at: 'web_start',
same_as: 'nama_pelanggan',
autolengkap daripada: 'nama_pelanggan', tajuk: '' };
item[2] = { name: 'field 2', populate_at: 'web_end',
same_as: 'nama_pengguna',
autolengkap daripada: 'nama_pengguna', tajuk: '' };
kembalikan { item };
},
render: function() {
var _ini = ini;
kembali (
<div>
{ Object.keys(this.state.items).map(function (key) {
var item = _this.state.items[key];
kembali (
<div>
<PopulateAtCheckboxes this={this}
checked={item.populate_at} id={key}
populate_at={data.populate_at} />
</div>
);
}, ini)}
<butang onClick={this.newFieldEntry}>Buat medan baharu</button>
<butang onClick={this.saveAndContinue}>Simpan dan Teruskan</button>
</div>
);
}</pre>
<p>Saya mahu mengemas kini keadaan apabila pengguna menukar sebarang nilai, tetapi saya menghadapi masalah mencari objek yang betul: </p>
<pre class="brush:php;toolbar:false;">var PopulateAtCheckboxes = React.createClass({
handleChange: fungsi (e) {
item = this.state.item[1];
item.name = 'newName';
item[1] = item;
this.setState({item: item});
},
render: function() {
var populateAtCheckbox = this.props.populate_at.map(function(value) {
kembali (
<label untuk={value}>
<input type="radio" name={'populate_at'+this.props.id} value={value}
onChange={this.handleChange} checked={this.props.checked == value}
ref="populate-at"/>
{value}
</label>
);
}, ini);
kembali (
<div className="populate-at-checkboxes">
{populateAtCheckbox}
</div>
);
}
});</pre>
<p>Bagaimana saya harus membuat <code>this.setState</code> supaya ia mengemas kini <code>item[1].name</code>? </p>
Anda boleh menggunakan
更新
penolong kebolehubah untuk mencapai ini : p>Sebagai alternatif, jika anda tidak peduli untuk dapat mengesan perubahan pada ini menggunakan kaedah kitar hayat
===
在shouldComponentUpdate()
, anda boleh mengedit keadaan secara terus dan memaksa komponen untuk dipaparkan semula - ini sebenarnya sama dengan jawapan @limelights, kerana ia menarik objek keluar dari keadaan dan Editnya.Suntingan kemudian ditambahkan:
Lihat pelajaran dalam Komunikasi Komponen Mudah latihan tindak balas untuk contoh cara menghantar fungsi panggil balik daripada keadaan penahanan komponen induk kepada komponen anak yang perlu mencetuskan perubahan keadaan.
Begini cara melakukannya tanpa perpustakaan pembantu:
Anda boleh menggabungkan langkah 2 dan 3 jika perlu:
Atau anda boleh melakukan semuanya dalam satu baris:
Nota: Saya mencipta
items
sebagai tatasusunan. OP menggunakan objek. Walau bagaimanapun, konsepnya adalah sama.Anda boleh melihat apa yang berlaku di terminal/konsol: