javascript - 在带有 Hooks 的 React 中以两种方式绑定多个输入

Question

我有两个输入。如果我想将输入值与状态变量绑定，我使用这个 -

状态：

 const [message, setMessage] = useState('')
 const [newUser, setNewUser] = useState('')

绑定它们的方法：

 const handleMessageChange = (e) => setMessage(e.target.value)
 const handleUserChange = (e) => setNewUser(e.target.value)

我使用输入上的 onChange 属性调用这些方法。

我的问题：

我可以使用通用的 handleChange 方法而不是为每个输入/状态对显式创建方法吗？如果是这样，怎么做？

标签： javascriptreactjsreact-hooks

Answer 1

您可能会考虑将两者都存储user在message一个{data}状态持有者中，并handleChange仅修改状态对象中的相关键

---

  const [data, setData] = useState({user: "", message: ""})

  const handleChange = e => setData({...data, [e.target.name]: e.target.value})

  <input name="message" value={data.message} onChange={e => handleChange(e)} />
  <input name="user" value={data.user} onChange={e => handleChange(e)} />

---