setState реагирует на генерацию массива

Question

Как вставить индекс в позицию массива по событию onChange?Давайте предположим, что пользователь может печатать на любом входе, и я могу получить значения в массиве, позиция должна совпадать с индексом ввода

onChange = () => {
    //so that I get, console.log(this.state.inputGroup)
    //expected ['value1', 'value2', 'value3']
}

render() {
    return(
        <div>
            <input onChange={e => this.onChange(1, index)} type="text"/>
            <input onChange={e => this.onChange(2, index)} type="text"/>
            <input onChange={e => this.onChange(3, index)} type="text"/>
        </div>
    )
}

Answer 1

class Test extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      inputGroup: [null, null, null]
    }
  }

  onChange(index, e) {
    const inputGroupState = this.state.inputGroup;
    inputGroupState[index] = e.target.value;

    this.setState({
        inputGroup: inputGroupState
      },
      () => {
        console.log(this.state.inputGroup)
      }
    );
  }

  render() {
    return ( 
      <div>
       <input onChange = {e => this.onChange(0, e)} type = "text" / >
       <input onChange = {e => this.onChange(1, e)} type = "text" / >
       <input onChange = {e => this.onChange(2, e)} type = "text" / >
      </div>
    )
  }
}

ReactDOM.render( < Test / > , document.querySelector("#app"))

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Answer 2

Вам необходимо передать значение из ввода в метод onChange.Итак, вы проходите e.target.value.Фиксированные индексы являются первым аргументом, и именно так вы указываете на индекс массива.

<input onChange={(e) => { this.onChange(1, e.target.value) }} type="text"/>

и в onChange метод

onChange = (inputIndex, textValue) => {
   //I assume that array of size equal to inputs quantity already is 
   //declared with ex. empty strings (you can initialize that in 
   //component constructor)

   const inputGroup = this.state.inputGroup
   inputGroup[inputIndex] = textValue

   this.setState({ inputGroup })
}

И кстати.Вы, вероятно, хотите начать индексацию входных данных с 0 :) В противном случае элемент 0 массива никогда не будет использоваться ни одним из входных данных.