Реагировать поля динамического ввода формы

Question

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

Когда пользователь отправляет форму, мне нужно получить значения, выбранные из каждой группы. Группы генерируются динамически с использованием функции 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>

Answer 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.handleChange)
/>


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