如何使用 onChange 和 setState() 将事件目标推送到 state 中数组中的 object

Question

我正在尝试获取 onChange 事件并将其推送到 state 中的数组，而不仅仅是 state.JSX 和下面的 state：

state = {
  draftboard: []
}
....


{picks.slice(0,2).map((pick) => (
  <Form.Control   
    onChange={this.onChange}
    defaultValue={pick}
    className='mb-2'
    size='sm'
    name='name'
    label={incrementPicks()}
    as="select" >
      {picks.map((pick) => (
        <option>{pick}</option>
      ))}
  </Form.Control>
))}

我的 onChange 是：

onChange = (e) => { 
  this.setState(state => {
    [e.target.name]: e.target.value
  }
}

问题是这只是将 state 设置为

state: {
    [],
    name: 1
}

我想要的是

state: {
    [{
       name: 1
    }]  
}

我将如何正确设置它？ 谢谢！

Answer 1

const value = ev.target.value;
const name = ev.target.name;
this.setState(prevState => ({
  ...prevState,
  draftboard: [
   ...prevState.draftboard,
   { value, name }
  ]
}))

Answer 2

试试这个

const onChange = (e) => {
    e.persist();
    this.setState(prevState => ({
        draftboard: [
            {
                [e.target.name]: e.target.value]
            },
             ...prevState.draftboard
        ]
    }));
};

Answer 3

我不确定你想要什么，我想这可以帮助你。

onChange = e => {        
this.setState(
  {        
  ...this.state,
    draftboard : [
      {
        ...this.state.draftboard[0],
        [e.target.name]: e.target.value
      }
    ]
  }
)

}