reactjs - 动态生成的 Material UI 单选按钮无法点击

演示链接: https://codesandbox.io/s/material-demo-9fwlz

虽然看起来这段代码应该有可选的单选元素，但实际上并没有。有什么想法是哪里出问题了吗？这是从 material-ui 示例代码片段派生的，唯一的修改是 RadioGroup 中的单选元素是根据输入的 props 动态生成的。

export default function RadioButtonsGroup(props) {
  const [value, setValue] = React.useState(null);

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValue((event.target as HTMLInputElement).value);
  };

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

答案＃1

随便吧，我只是个笨蛋。

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValue((event.target as HTMLInputElement).value);
  };

event.target.value 的类型是 string。我的值是 number。

const handleChange = (e) => {
  setValue(Number(e.target.value));
}

太好了，那值变成了一个 string 什么的。

答案＃2

如果你的值是一个数字，那么使用 toString() 将这个数字转换成字符串

<FormControlLabel
key={index}
value={value.toString()}
control={<Radio />}
label={readable}
/>