javascript - 如何在 React useState 中存储和更新多个值？

Question

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