Установите радиовход по умолчанию и соответствующий флажок

Question

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

Кроме того, флажок также должен соответствовать переключателю выбора и наоборот.

class RadioButtonsGroup extends React.Component {
  state = {
    value: 1
  };

  handlePersonToggle = event => {
    this.setState({ value: event.target.value });
  };

  render() {
    const { classes } = this.props;

    return (
      <RadioGroup
        aria-label="matches"
        name="matches"
        value={this.state.value}
        onChange={this.handlePersonToggle}
      >
        {data.map(person => (
          <div>
            <FormControlLabel
              value={person.Id}
              control={<Radio color="primary" />}
            />
            <FormControlLabel value={person.Id} control={<Checkbox />} />
          </div>
        ))}
      </RadioGroup>
    );
  }
}

Пример Codesandbox - https://codesandbox.io/s/xp9rpw1ro4

Answer 1

Несколько проблем здесь:

1. Непосредственным дочерним элементом RadioGroup должен быть массив, например, FormControlLabels
2. Вам необходимо либо преобразовать значение Radio в строку, либо значениев состоянии номер.Входные значения всегда являются строками, и RadioGroup использует строгую проверку на равенство.

Решение:

<RadioGroup
  aria-label="matches"
  name="matches"
  value={this.state.value}
  onChange={this.handlePersonToggle}
>
  {data.map(person => (
    <FormControlLabel key={person.Id}
      value={String(person.Id)}
      control={<Radio color="primary" />}
    />
  ))}
</RadioGroup>

Answer 2

ваш JSON:

  {
        Id: 4,
        profilePicture: "http://via.placeholder.com/150x150",
        firstName: "Mike",
        lastName: "Rudge",
        cat: "old",
        checked:true,
      }

ваш рендер:

 <FormControlLabel
              value={person.Id}
              checked={person.checked}
              control={<Radio color="primary" />}
            />

Вам необходимо пройти проверку пропущенных = {true}