无法使自定义无线电控件成为已包含动态生成的无线电控件的无线电组的一部分

Question

下面是我的问题中引用的代码的 link - https://codesandbox.io/s/material-demo-forked-gtztx?file=/demo.tsx

在下面的代码中（或上面代码框 link 中的 demo.tsx），我试图将一个新的 FormControlLabel 单选按钮（第 24 行）组合到动态生成的 material UI 单选按钮。我不想将这个新的单选按钮添加到“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>
  );
}

Answer 1

这就是你需要的 - https://codesandbox.io/s/material-demo-forked-jgopr

基本上，我向所有单选按钮（自定义单选按钮和 optionList 中的单选按钮）添加了一个 checked 道具，以正确显示 [=12] 单选按钮的选定状态=]在组件状态下。

无法使自定义无线电控件成为已包含动态生成的无线电控件的无线电组的一部分

Unable to make a custom radio control a part of the radio group that already contains dynamic generated radio controls

radio-group

reactjs

material-ui