Реагировать на событие push.target.value в массив

Question

Я новичок в реакции и теперь столкнулся с проблемой при попытке вставить значение поля ввода в массив. Я был бы очень признателен, если бы вы могли мне помочь.

Вообще говоря, я хочу сохранить входное значение нескольких полей ввода в массив. Все поля ввода вызывают одну и ту же функцию onChange (поскольку поля ввода генерируются картой, они должны использовать одну и ту же функцию onChange).

Вот мои коды.

class App extends Component {
  constructor(){
  super();
  this.state = {
      SCAnswer:"",
      SCAnswerGroup: []
    }
  }

  handleChange(event){
    this.setState({SCAnswer: event.target.value});
    const SCAnswerGroup = this.state.SCAnswerGroup;
    SCAnswerGroup.push(this.state.SCAnswer);
    this.setState({SCAnswerGroup});
  }

  BuildAnswerGroup(){
    const n = this.state.DropdownValue;
    if (this.state.DropdownValue ==="Number of answers") {
        return(<div></div>)
    }
    else {
    return [...Array(n)].map((e, i) => 
    <div key={i} className="SingleChoiceAnswers">
       <input onChange={this.handleChange.bind(this)} size="100%" type="text" className="SingleChoiceAnswer"/>
    </div>   
    )}}

  render(){
    return(
    ...
    { this.BuildAnswerGroup()}
    )
  }
}

Например, если на входах двух полей ввода указано «Да», «Нет», ожидаемое значение SCAnswerGroup - [«Да», «Нет»]. Однако, что я получил, это ["YYeYesN"]. Я думаю, что каждое изменение буквы сохраняется в массиве, кроме последней буквы. Не могли бы вы помочь мне получить ожидаемые результаты?

Большое спасибо заранее!

Answer 1

Вы можете передать другой индекс аргумента в функцию handleChange, а затем в функции изменить индекс в массиве

handleChange(event, i){
  this.setState({SCAnswer: event.target.value});
  const SCAnswerGroup = this.state.SCAnswerGroup;
  SCAnswerGroup[i] = event.target.value;
  this.setState({SCAnswerGroup});
}
// in the render method
<input onChange={(event) => this.handleChange(event, i)} />