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

Question

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

state：

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

绑定它们的方法：

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

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

我的问题：

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

Answer 1

这里有两种方法： 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} />

希望有帮助，

干杯!

Answer 2

您可以考虑将user和message存储在一个{data} state 持有人中，并在handleChange仅修改 state object 中的相关密钥

---

  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)} />

---