Javascript 在带有挂钩的React中双向绑定多个输入

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

国家：

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

绑定它们的方法：

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

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

我的问题是：

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

这里有两种方法：

在这里演示其中一种方法

钩子和处理器：

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

希望有帮助

干杯 以下是两种方法：

在这里演示其中一种方法

钩子和处理器：

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

希望有帮助

---

干杯<在一个代码> > {数据} /代码>状态持有者中，您可以考虑同时存储<代码>用户<代码> >代码>消息>代码>，并且在<代码> HydLechange < /C> >只修改状态对象

中的相关键。

---

const[data，setData]=useState（{user:，message:}）
const handleChange=e=>setData（{…data[e.target.name]：e.target.value}）
handleChange（e）}/>
handleChange（e）}/>

---

>p>您可以考虑在一个<代码> {DAT} < /Cord>状态持有者中存储代码< >用户>代码> <代码>消息>代码，并且在<代码> HydLechange < /C> >只修改状态对象

中的相关键。

---

const[data，setData]=useState（{user:，message:}）
const handleChange=e=>setData（{…data[e.target.name]：e.target.value}）
handleChange（e）}/>
handleChange（e）}/>

---

---

这是否回答了您的问题？这回答了你的问题吗？嗨，setData是从哪里来的？对不起，输入错误。。不管怎样，编辑我的答案时有点解释嗨，setData从哪里来？对不起，输入错误。。不管怎么说，编辑我的答案时有点解释