时间戳

首页 > 解决方案 > 使用 useState 为多个值反应表单

reactjs - 使用 useState 为多个值反应表单

问题描述

我在这里有一个演示

这是一个带有打字稿的简单反应形式

字段完成时是否可以使用 useState 捕获输入字段数据

表单不仅仅是一个数据，而是 3 个数据 - 用户名、密码和电子邮件

我可以用一个值做到这一点

onChange={e => setContact(e.target.value)}

但我可以为 3 个单独的值做这件事吗

标签： reactjstypescript

解决方案

您可以使用计算属性来做到这一点。
首先为您的每个输入添加一个名称属性，其值为“用户名”、“密码”、“电子邮件”，然后：

onChange={e => setContact(contact => ({...contact, [e.target.name]: e.target.value}))}

编辑：在 17 之前的 React 版本中，事件被池化并且 setContact 更新函数异步运行，因此需要以这种方式持久化事件：

onChange={e => {
  e.persist();
  setContact(contact => ({...contact, [e.target.name]: e.target.value}));
}}

推荐阅读