Блог

Вот ссылка на код, на который ссылается ниже в моем вопросе — https://codesandbox.io/s/material-demo-forked-gtztx?file=/demo.tsx

В приведенном ниже коде (или demo.tsx по ссылке codesandbox выше) я пытаюсь объединить новый FormControlLabel переключатель (строка 24) с динамически создаваемыми переключателями пользовательского интерфейса материалов. Я не хочу добавлять этот новый переключатель в список «параметры» в «index.tsx», но я все равно хочу, чтобы этот новый переключатель находился в той же группе радиостанций «оплата».

Текущее поведение: После отображения страницы это пользовательское радио с меткой «Неизвестно» всегда остается проверенным.

Ожидаемое поведение: Сделайте этот пользовательский переключатель частью динамически создаваемых радиогрупп «оплата», не добавляя его в список «параметры» (см. index.tsx).

 export default function RadioButtonsGroup(props) {
  const [value, setValue] = React.useState(null);
  console.log(value);
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValue((event.target as HTMLInputElement).value);
  };

  return (
    <FormControl component="fieldset">
      <FormLabel component="legend">Payment</FormLabel>
      <RadioGroup
        aria-label="payment"
        name="payment1"
        value={value}
        onChange={handleChange}
      >
        {/* <FormControlLabel value={value} control={<Radio />} label="Unknown" /> */}
        {props.options.map(([value, readable], index) => (
          <FormControlLabel
            key={index}
            value={value}
            control={<Radio />}
            label={readable}
          />
        ))}
      </RadioGroup>
    </FormControl>
  );
}
 

Это то, что тебе нужно — https://codesandbox.io/s/material-demo-forked-jgopr

В принципе, я добавил checked опору ко всем переключателям (пользовательским и находящимся в optionList ), чтобы правильно отображать выбранное состояние радиоуправления для value состояния компонента.