在 React with/ Hooks 中两种方式绑定多个输入答案

【问题标题】：Two way binding more than one input in React w/ Hooks在 React with/ Hooks 中两种方式绑定多个输入
【发布时间】：2020-04-22 19:49:51
【问题描述】：

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

状态：

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

绑定它们的方法：

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

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

我的问题：

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

【问题讨论】：

这能回答你的问题吗？ stackoverflow.com/a/56951398/3662110

标签： javascript reactjs react-hooks

【解决方案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)} />

【讨论】：

嗨，setData 来自哪里？
抱歉，打错了.. 无论如何编辑我的答案与位解释

【解决方案2】：

这里有两种方法：https://codesandbox.io/s/relaxed-pine-zgwfy

在这里说明一种方式。

钩子和处理程序：

const [message, setMessage] = useState("");
const [newUser, setNewUser] = useState("");
const handleChange = e =>
    e.target.name === "message"
        ? setMessage(e.target.value)
        : e.target.name === "user"
        ? setNewUser(e.target.value)
        : "";

输入：

<input name="message" value={message} onChange={handleChange} />
<input name="user" value={newUser} onChange={handleChange} />

希望对你有帮助，

干杯！ ?

【讨论】：