React onChange：我可以为许多 onChange 事件创建一个 handleChange，并将一个对象键作为参数传递吗？

Question

解决方案

const onChangeHandler = (e, name) => {
  setFormData((c) => ({
    ...c,
    [name]: e.target.value,
  }));
};

onChange={(e) => onChangeHandler(e, "firstName")}

旧

我在一些输入中有这个功能。大约有 15 个输入。我想知道我是否可以将它们包装在一个函数中并一起处理它们。我的个人输入 onChange 处理程序如下：

onChange={({ target }) =>
  setFormData((c) => ({
    ...c,
    driversLicense: target.value,
  }))
}

setFormData 作为 props 从另一个组件传递过来。采用先前的值 (c) 并添加我们的当前值。我想要一个函数来动态设置 键和目标 。所以类似的东西，但我什至无法达到这个名字。它说它没有被使用。有什么想法吗？

const onChangeHandler = (e, name) => {
  setFormData((c) => ({
    ...c,
    name: e.target.value,
  }));
};

Answer 1

你需要{ [propertyNameFromVariable]: value}:

const onChangeHandler = (e, name) => {
  setFormData((c) => ({
    ...c,
    [name]: e.target.value,
  }));
};

（下一个问题是：我们如何用useMemo/useCallback记住这个？）

React onChange：我可以为许多 onChange 事件创建一个 handleChange，并将一个对象键作为参数传递吗？

React onChange: Can I make a handleChange for many onChange events, and also pass an object key as a parameter?

javascript

state

onchange

reactjs