javascript - 优化 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
  })
}

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

标签： javascriptreactjs

Answer 1

你可以这样做

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

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