Using a dynamic key to setState in React [duplicate]

问题

This question already has answers here:

How to use a variable for a key in a JavaScript object literal? (13 answers)

Reactjs setState() with a dynamic key name? (9 answers)

react setState with dynamic key (1 answer)

Closed last year.

From an input field I am sending the value as an argument to the function that sets state. I have multiple input fields so would like to use their name (which is equal to their state key) to then use the same function and pass in the key and value to the function that sets state.

here is my code.

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

and the input

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

the text argument works, but the key argument does not.

Thanks in advance.

回答1:

When setting state with a dynamic key, you need to wrap the key within [] like

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

来源：https://stackoverflow.com/questions/51282464/using-a-dynamic-key-to-setstate-in-react