當(dāng)用戶在表單中鍵入時(shí)，我試圖更新?tīng)顟B(tài)中嵌套對(duì)象的鍵/值對(duì)。我的狀態(tài)看起來(lái)像這樣：constructor(props) {super(props);this.state = { details: { detail1: { title: "", description: "", image1: null, image2: null, }, detail2: { title: "", description: "", image1: null, image2: null, }, detail3: { title: "", description: "", image1: null, image2: null, }, },};}這是我的渲染方法：<form> <input type="text" value={this.state.creatives.creative1.title} onChange={(e) => { this.setState((prevState) => ({ creatives: { ...prevState.creatives, creative1: { ...prevState.creatives.creative1, title: e.target.value, }, }, })); console.log(this.state.details.detail1.title); }} ></input> </form>我嘗試在 onChange 方法中更新上面的鍵/值，但控制臺(tái)說(shuō)我無(wú)法在 null 上調(diào)用 .target。由于某種原因， event.target 返回 null，我不確定為什么。如果有人有更好的解決方案來(lái)添加鍵入的值來(lái)更新?tīng)顟B(tài)，請(qǐng)?zhí)峁椭?
1 回答
慕少森
TA貢獻(xiàn)2019條經(jīng)驗(yàn) 獲得超9個(gè)贊
傳遞給 onChange 的事件是一個(gè)綜合事件。您不能以異步方式使用此類事件，因?yàn)?React 將重用該事件。setState以異步方式調(diào)用更新程序函數(shù)。如果您將事件值存儲(chǔ)在常量中并在 中訪問(wèn)它setState，它應(yīng)該可以工作。
https://reactjs.org/docs/events.html
https://reactjs.org/docs/react-component.html#setstate
onChange={(e) => {
const value = e.target.value
this.setState((prevState) => ({
creatives: {
...prevState.creatives,
creative1: {
...prevState.creatives.creative1,
title: value,
},
},
}));
console.log(this.state.details.detail1.title);
}}
- 1 回答
- 0 關(guān)注
- 163 瀏覽
添加回答
舉報(bào)
0/150
提交
取消