优化 React 中的功能。 将 setState 键作为道具？

Question

拥有这个功能，它基本上定义了要收听的表单输入。 然而，随着输入的增长，函数也在增长。

我正在考虑传递一个 id 并将其与状态键的值进行比较，这样这个状态就会改变。

onChange = event => {
  if (event.target.id === "Name") {
    this.setState({
      name: event.target.value
    });
  } else if (event.target.id === "Position") {
    this.setState({
      position: event.target.value
    });
  } else if (event.target.id === "Text") {
    this.setState({
      text: event.target.value
    });
  }
};

那么如何正确处理状态呢？

我在想这样的事情。 因此输入表单调用具有 id 值的函数并找到具有相同名称|值的状态。

onChange = (event, id) => {
  this.setState({
  { id value as a key?}: event.target.value
  })
}

但是，不明白如何正确编写它。 请问有什么帮助吗？

Answer 1

你可以这样做

onChange = event => {
    this.setState({
        [event.target.id]: event.target.value
    })
}

还将您的元素 id 更改为name 、 position和text

Answer 2

您更有可能应该使用useReducer 。

useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one