html 响应函数,javascript - 响应HTML选择元素onChange函数,尝试访问“ event.target.value” - 堆栈内存溢出...

本文探讨了在React应用中如何有效地更新受控组件的状态。通过对比两种不同的方法,展示了如何利用`setNestedState`函数正确地更新状态对象中的特定属性,并分析了为何一种方法仅在首次更改时有效。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在React中使用受控的HTML 标签时。

关于以下代码段:

工作原理:

选项1

function changeSelect(event) {

const newValue = event.target.value;

setNestedState((prevState) => {

return({

...prevState,

propA: newValue

});

});

}

这不是吗? (仅在第一次更改时有效)

选项#2

function changeSelect(event) {

setNestedState((prevState) => {

return({

...prevState,

propA: event.target.value

});

});

}

SNIPPET(使用选项2)

function App() { const [nestedState,setNestedState] = React.useState({ propA: 'foo1', propB: 'bar' }); function changeSelect(event) { // const newValue = event.target.value; setNestedState((prevState) => { return({ ...prevState, propA: event.target.value // THIS DOES NOT WORK }); }); } return(

My nested state:
{JSON.stringify(nestedState)}
foo1foo2foo3 ); } ReactDOM.render(, document.getElementById('root'));
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值