javascript - 在 React 中使用动态键设置状态

Question

这个问题在这里已经有了答案:

How to use a variable for a key in a JavaScript object literal? (16 个答案)

Reactjs setState() with a dynamic key name? (13 个回答)

react setState with dynamic key (1 个回答)

关闭 4年前。

从输入字段中，我将值作为参数发送给设置状态的函数。我有多个输入字段，因此想使用它们的名称(等于它们的状态键)然后使用相同的函数并将键和值传递给设置状态的函数。

这是我的代码。

<Modal
  onTextChange={(text, key) => {
    this.setState({
      event: {
        key: text
      }
    })
  }}
/>

和输入

<input
  type="date"
  name="dateStart"
  onKeyUp={event => this.props.onTextChange(event.target.value, event.target.name)
/>

text 参数有效，但 key 参数无效。

提前致谢。

Answer 1

当使用动态键设置状态时，您需要将键包装在 [] 中，如

<Modal
  onTextChange={(text, key) => {
    this.setState({
      event: {
        [key]: text
      }
    })
  }}
/>