在React w Hooks中双向绑定多个输入。

我有两个输入。如果我想将输入值与状态变量绑定，我使用了这样的方法–。

狀態:

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

绑定它们的方法。

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

我通过输入的onChange属性来调用这些方法。

我的问题是……我可以使用一个通用的handleChange方法，而不是显式地给每个输入状态对创建一个方法吗？

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

解决方案：

你可以考虑把这两个变量都存储在 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)} />