Как правильно отобразить элемент React с отдельными элементами формы переключателя?

Question

Я пытаюсь создать элемент карты, где пользователи могут голосовать «за», «нет» или «возможно» за изображение.Прямо сейчас это читает как радио кнопки 90 вариантов для одного изображения, а не 30 отдельных с 3 вариантами.Как мне нанести карту на каждую карту, чтобы форма соответствовала изображению?Массив будет читаться как

{ userChoices: {
  characterName[0]:choice.value,
  characterName[1]:choice.value,
  ....
}}

const choiceCard = characterData.map((character, key) =>
  <div className="col-sm-12 col-md-3" id="choiceCard" key={character.id}>
    <div id="choiceContent">
      <img src={character.statusImage}/>
      <div id="choice-inner" className="form">
        <span>{character.name}</span>
        <div class="form-check">
          <input 
           class="form-check-input" 
           type="radio" 
           name="yes" 
           id="yes" 
           value="yes"/>
          <label class="form-check-label" for="yes">
            Yes
          </label>
        </div>
        <div class="form-check">
          <input 
           class="form-check-input" 
           type="radio" 
           name="no" 
           id="no" 
           value="no"/>
          <label class="form-check-label" for="no">
            No
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="maybe" id="maybe" value="maybe"/>
          <label class="form-check-label" for="maybe">
            Maybe
          </label>
        </div>
      </div>
    </div>
  </div>
);

Answer 1

Вы находитесь рядом с тем местом, где вы хотите быть, здесь есть только две вещи:

1. Связывание каждого набора кнопок с символом.
2. Отслеживание состояния для каждого символа.

Это естественный вариант использования управляемых компонентов.Управляемая радио-кнопка будет выглядеть примерно так:

<input
    key={someID}
    type="radio"
    value={choice}
    checked={this.state.choice === choice}
    onChange={() => this.handleChange(choice)}
/>

с обработчиком изменений:

handleChange = newChoice => {
    this.setState({
        choice: choice
    });
}

(см. https://reactjs.org/docs/forms.html)

Применение этого к вашей проблеме,в конечном итоге вы получите что-то вроде этого:

const choices = [
    "Yes",
    "No",
    "Maybe"
]

const choiceCard = characterData.map((character, key) => {
    return (
        <label key={character.id}>
            {character.name}
            {choices.map(choice => {
                return (
                    <input
                        key={choice}
                        type="radio"
                        value={choice}
                        checked={this.state.userChoices[key] === choice}
                        onChange={() => this.handleChange(choice, key)}
                    />
                );
            })}
        </label>
    );
});

И следующий обработчик изменений:

handleChange = (choice, key) => {
    this.setState(prevState => ({
        userChoices: { ...prevState.userChoices, [key]: choice }
    }));
};

Вот быстрый и грязный кодекс, с которым вы можете поиграть, чтобы помочь вашему пониманию: https://codepen.io/anon/pen/axzMxm?editors=0010