Двухстороннее связывание более чем одного ввода в React с Hooks

Question

Я получил два входа. Если я хочу связать входное значение с переменной состояния, я использую это -

Состояние:

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

Методы связывания их:

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

И я вызываю эти методы со свойством onChange на входе.

Мой вопрос:

Могу ли я использовать обобщенный c метод handleChange вместо явного создания метода для каждой пары ввода / состояния? Если так, то как?

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

---

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

Надеюсь, что помогает,

Ура! 101