reactjs - 动态生成的 Material UI 单选按钮不可点击

Question

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

虽然看起来这段代码应该有可检查的单选元素，但它没有。关于什么是 splinter 的任何想法？这是从 material-ui 演示片段派生的，唯一的修改是 RadioGroup 中的 radio 元素是从输入 Prop 动态生成的。

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>
  );
}

Answer 1

随便，我只是个白痴。

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

event.target.value的类型是 string .我的值(value)观是 number s。

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

可爱，那个值变成了 string和所有。