javascript - 优化React中的功能。有 setState key 作为 Prop 吗？

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