我使用钩子在 React 组件中收集了一系列用户数据元素。
const [mobile, setMobile] = useState('');
const [username, setUsername] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
其中每一个更新如下。
<input type="text"
className="form-control"
id="mobile"
placeholder="Enter a valid mobile number"
onChange={event => {setMobile(event.target.value)}}/>
使用对象作为变量有没有更简洁的方法来做到这一点？
您应该name向输入标签添加属性。每个名称都必须引用AllValues对象中的键。
const [allValues, setAllValues] = useState({
mobile: '',
username: '',
email: '',
password: '',
confirmPassword: ''
});
const changeHandler = e => {
setAllValues({...allValues, [e.target.name]: e.target.value})
}
return (
<input type="text"
className="form-control"
id="mobile"
name="mobile"
placeholder="Enter a valid mobile number"
onChange={changeHandler}
/>
// ...
)
上述答案在某些情况下可能会产生问题，以下应该是正确的方法。
const [allValues, setAllValues] = useState({
mobile: '',
username: '',
email: '',
password: '',
confirmPassword: ''
});
const changeHandler = e => {
setAllValues( prevValues => {
return { ...prevValues,[e.target.name]: e.target.value}
}
}
设置初始值
const initialValues = { // type all the fields you need
name: '',
email: '',
password: ''
};
使用状态
const [values, setValues] = useState(initialValues); // set initial state
处理变更
const handleChange = (e) => {
setValues({
...values, // spreading the unchanged values
[e.target.name]: e.target.value, // changing the state of *changed value*
});
};
制作表格
<form>
<input type="email"
id="xyz"
name="email" // using name, value, onChange for applying changes
value={email}
onChange={changeHandler}
placeholder="Enter your email"
/>
// other inputs
</form>