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

Question

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

虽然看起来这段代码应该有可检查的无线电元素，但它没有。对什么坏了有什么想法吗？这是从 material-ui 演示片段派生的，唯一的修改是 RadioGroup 中的无线电元素是从输入道具动态生成的。

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.我的价值观是numbers。

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

可爱，这种价值变成了string和一切。

Answer 2

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

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