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

Question

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

在下面的代码中（或上面的代码框链接中的demo.tsx），我试图将一个新的FormControlLabel 单选按钮（第24 行）组合到动态生成的材质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 属性，以正确显示组件状态下value 的选择状态。