在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方法,而不是显式地给每个输入状态对创建一个方法吗?如果可以,怎么做?

解决方案:

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

本文来自投稿,不代表运维实战侠立场,如若转载,请注明出处:https://www.shizhanxia.com/895.html

(0)
上一篇 2022年6月29日 下午4:01
下一篇 2022年6月29日 下午4:01

相关推荐

发表评论

登录后才能评论