當用戶在表單中鍵入時，我試圖更新狀態(tài)中嵌套對象的鍵/值對。我的狀態(tà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 方法中更新上面的鍵/值，但控制臺說我無法在 null 上調用 .target。由于某種原因， event.target 返回 null，我不確定為什么。如果有人有更好的解決方案來添加鍵入的值來更新狀態(tài)，請?zhí)峁椭?
1 回答
慕少森
TA貢獻2019條經驗 獲得超9個贊
傳遞給 onChange 的事件是一個綜合事件。您不能以異步方式使用此類事件，因為 React 將重用該事件。setState以異步方式調用更新程序函數(shù)。如果您將事件值存儲在常量中并在 中訪問它setState，它應該可以工作。
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 關注
- 137 瀏覽
添加回答
舉報
0/150
提交
取消