如何在 React useState 中存储和更新多个值?

Question

我有一系列用户数据元素，我使用钩子在 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)}}/>

有没有更简洁的方法可以使用对象作为变量来做到这一点？

Answer 1

您应该向输入标签添加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}
/>
// ...
)

Answer 2

上述答案在某些情况下可能会产生问题，以下应该是正确的方法。

const [allValues, setAllValues] = useState({
mobile: '',
username: '',
email: '',
password: '',
confirmPassword: ''
});
const changeHandler = e => {
setAllValues( prevValues => {
return { ...prevValues,[e.target.name]: e.target.value}
}
}

Answer 3

设置初始值

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>