React Hooks 中动态设置状态时出错
2019-12-21
68
嗨,我正在尝试在 react-hooks 概念中动态设置输入值,但遇到了错误。有人能帮我解决这个问题吗:
代码:
import React,{useState} from 'react';
function ObjectHook() {
var [names,setName]=useState({fname:'',lname:''});
let UpdateData = (event) =>{
setName({...names,[event.target.name]:event.target.value})
}
return(
<div>
<input type='text' name='fname' value={names.fname} onChange={UpdateData}>First Name</input>
<input type='text' name='lname' value={names.lname} onChange={UpdateData}>Last Name</input>
<h1>{names.fname}</h1>
<h1>{names.lname}</h1>
</div>
)
}
export default ObjectHook;
2个回答
使用占位符代替子文本
<input type='text' name='fname' value={names.fname} onChange={UpdateData} placeholder='First Name' />
Alexander Vidaurre Arroyo
2019-12-21
inputs 不接受子元素。这意味着您不能这样做...
<input>text</input>
您可以使用输入 placeholder 属性,但占位符不可 访问 。
最好的办法是使用标签。
<label>
First Name<
<input />
</label>
<label>
Last Name<
<input />
</label>
Ari
2019-12-21