Как сохранить данные формы множественной реакции в состоянии

Question

У меня есть страница, где пользователи могут отправлять формы. Они могут добавить новые формы на страницу (формы 2, 3, 4, 5 того же типа).

Я справлюсь с этим:

handleAddPastMainData() {
  const pastMainData = this.state.mainData[0].pastMainData;

  this.setState({
    mainData: {
      ...this.state.mainData,
      pastMainData: pastMainData.push([])
    }
  })
}

Затем я отображаю через pastMainData , чтобы отобразить добавленную форму.

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

Мое текущее состояние таково:

this.state = {
  mainData: [
    {pastMainData: []},
  ]
};

И мой обработчик:

handleMainInputChange = (event) => {
  const name = event.target.name;
  const value = target.type === 'checkbox' ? target.checked : target.value;

  this.setState(state => {
    state.mainData[0].pastMainData[name] = value;
    return state
  })
};

Пример поля ввода формы в моем приложении:

<Field
  label="Main name"
  id="pastMainName"
  name="pastMainName"
  placeholder="Super Awesome FName"
  value={state.MainData[0].pastMainData.pastMainName}
  onChange={handleMainInputChange}
/>

Я назначаю ключ каждой форме, когда сопоставляю через pastMainData .

Таким образом, пользователь может добавить более 5 из вышеприведенного поля ввода и отправить.

Когда данные отправляются, я хочу, чтобы состояние выглядело так:

this.state = {
  mainData: [
    {pastMainData: [[field1], [field2], [field3]},
  ]
};

Когда пользователь возвращается, это дает мне возможность проверить количество полей / форм, которые пользователь уже заполнил, и отобразить их с сохраненными данными.

Однако это, очевидно, не работает. Буду очень признателен за любой способ улучшить мой код и сделать его более эффективным.

Спасибо

Answer 1

В настоящее время, когда я запускаю код, при нажатии кнопки Добавить форму он отображает форма, но продолжается на следующей странице. Призыв к продолжению следующего страница только для метода handleSubmit.

Чтобы остановить переход на следующую страницу, вам, вероятно, нужно e.preventDefault() на этой кнопке.

"так как форм много, как мне получить ключ и использовать это конкретный ключ в handleMainInputChange. "

Добавьте ключ к полю или форме. Например:

<Field
  key={key}
  label="Main name"
  id="pastMainName"
  name="pastMainName"
  placeholder="Super Awesome FName"
  value={state.MainData[0].pastMainData.pastMainName}
  onChange={handleMainInputChange}
/>

И вы должны иметь доступ к нему, как к любому data-attr, если нет, вы можете передать его как параметр в функцию onChange.

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

this.state = {
  forms: {
    form1: {},
    form2: {},
    form3: {},
  }
};

может сделать настройку и доступ проще в долгосрочной перспективе.