动态生成的材质 UI 单选按钮不可点击答案

【问题标题】：Dynamically generated material UI Radio buttons not clickable动态生成的材质 UI 单选按钮不可点击
【发布时间】：2020-03-22 23:14:51
【问题描述】：

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

虽然这段代码看起来应该有可检查的单选元素，但它没有。有什么想法坏了？这个来源于material-ui demo sn-p，唯一的修改是RadioGroup内的radio元素是由input 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>
  );
}

【问题讨论】：

标签： reactjs typescript material-ui

【解决方案1】：

随便，我只是个白痴。

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

event.target.value 的类型是string。我的价值观是numbers。

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

很可爱，这个值变成了string 等等。

【讨论】：

【解决方案2】：

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

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

【讨论】：