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

پاسخ شماره ۱

آزاد، من فقط یک احمقم.

  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 شد و همه چیز.

پاسخ شماره ۲

اگر مقدار شما یک عدد است، این عدد را با استفاده از toString() به رشته تبدیل کنید

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