英文:
how to specify and change object in object of useState
问题
const [info, setInfo] = useState({
idx: 1,
user: {
name: ""
}
});
function handle(e) {
setInfo(prev => ({ ...prev, [e.target.name]: e.target.value }));
}
<input type="text" onChange={(e) => handle(e)} name="idx" /> // works!
<input type="text" onChange={(e) => handle(e)} name="user.name" /> // NOT work
如何更改useState中的user.name值作为文本输入的name属性？
尝试：
name="user.name"
name="user['name']"
英文:
const [info, setInfo] = useState({
idx: 1,
user: {
name: ""
}
});
function handle(e) {
setInfo(prev => ({ ...prev, [e.target.name]: e.target.value }));
}
<input type="text" onChange={(e) => handle(e)} name="idx" /> // works!
<input type="text" onChange={(e) => handle(e)} name="user.name" /> // NOT work
how can i change user.name value of useState as name attribute of text input?
try:
name="user.name"
name="user['name']"
答案1
得分: 1
因为 name 嵌套在 user 中，所以最好有一个独立的 onChange 函数，因为你当前的 handle 函数只会使用 e.target.name 来设置顶层键。
<input type="text" onChange={(e) => setInfo(prevState => ({...prevState, user: {name: e.target.value}})}/>
英文:
Because name is nested in user it would be easier to have an independent onChange function, as your current handle function will only set top-level keys using e.target.name
<input type="text" onChange={(e) => setInfo(prevState => {...prevState, user: {name: e.target.value}})}/>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论