Поля динамического ввода React Form

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

Когда пользователь отправляет форму, мне нужно получить значения, выбранные из каждой группы. Группы генерируются динамически с помощью функции map. Я мало что нашел по этой теме.

Мой существующий код:

<form onSubmit = {this.handleSubmit.bind(this)}>
  <div className = "container">
    {this.state.food.options.map((food, i) =>
      <div key = {i}>
        <h5 style = {{marginBottom: 2}}><b>{food.name}</b></h5><br />
          <div>
            {food.options.map((option, k) =>
              <div className = "row" key = {k}>
                <div className = "col-3" style = {{flex: '0 0 10%'}}>
                  <input type = "radio" name = {option.name} value = {option.id} style = {{height: 20}} />
                </div>
                <div className = "col-3">
                  <span style = {{paddingTop: 10, fontSize: 12}}>{option.name}</span>
                </div>
              </div>
              )}
            </div>
            <hr />
          </div>
          )}
      </div>
    </form>

пожалуйста, добавьте свое состояние и создайте демо, если можете

— 07.01.2019 05:27

reactjs forms

07.01.2019 03:56

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

148

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вместо этого вы должны использовать атрибут checked

И используйте событие onChange для выбора optionID

<input 
type = "radio" 
name = {option.name} 
value = {option.id} 
style = {{height: 20}}  
checked = {this.state.optionId[option.name] === option.id}
onChange(this.handleChangeEvent)
/>


handleChangeEvent = e => {
    this.setState({
      optionId: e.target.value
      });
}

Спасибо, но как это можно применить к сгруппированным динамическим формам?

— 07.01.2019 04:35

У вас есть пример?

— 07.01.2019 04:55

Для нескольких групп: checked = {this.state.optionId[option.name] === option.id} onChange(this.handleChangeEvent) Я обновил код

— 07.01.2019 05:11

Помог ли вам мой ответ?

— 08.01.2019 22:57

07.01.2019 04:30