Обрабатывать много контролируемых входов с React

Question

Я создаю тест с несколькими вариантами ответов с помощью React.

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

Этоструктура, с которой я работаю.

<Form>
  <QuestionItem>
    <Question /> // input
    <Choices>
      <ChoiceItem /> // input
      <ChoiceItem /> // input
      <ChoiceItem /> // input
    </Choices>
  </QuestionItem>
  <QuestionItem> 
    <Question /> // input
    <Choices>
      <ChoiceItem /> // input
      <ChoiceItem /> // input
      <ChoiceItem /> // input
    </Choices>
  </QuestionItem>
</Form>

Я хотел бы сохранить все входные значения в состоянии или в хранилище.

Но, кажется, это медленно, когда я печатаю на техесли есть.

Что я должен сделать, чтобы улучшить это?

Answer 1

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

this.handleChange = this.handleChange.bind(this);
this.state = {
    firstinputname: '',
    secondinputname: '',
    ...
}

handleChange(e){
    this.setState({
        [e.target.name]: e.target.value
    })
}

и передавать обработчик и состояние событиязначение в качестве опоры для таких входных данных

<Question onChange={onChange} value={this.state.fistinputname} />

и в вашем компоненте Quration:

<input type="yourinputtype" name="firstinputname" value={this.props.value} onChange={this.props.onChange}