Question

我正在使用RadioGroup组件使用FormControlLabel显示Radio选项的动态列表。动态单选选项已成功显示，我可以使用RadioGroup中的onChange检索选定的单选选项。但是，当我检查单选选项时，该特定选项不会显示为“已选中”。

这是我正在使用的代码：

export default class Book extends Component {
  state = {
    slot: null,
  };
  ...
  onChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };
  ...
  <FormControl component="fieldset" className={classes.formControl}>
    <FormLabel component="legend">Select availability slot</FormLabel>
    <RadioGroup
      aria-label="Slot"
      name="slot"
      className={classes.group}
      value={this.state.slot}
      onChange={this.onChange}
    >
      {this.props.experience.availability !== null ? (
        this.props.experience.availability.map(single => (
          <FormControlLabel
            key={single.id}
            value={single.id}
            control={<Radio color="primary" />}
            label={single.title}
          />
        ))
      ) : ""}
      // Some manual options in addition to the above dynamic list
      <FormControlLabel
        value="female"
        control={<Radio color="primary" />}
        label="Female"
      />
      <FormControlLabel
        value="male"
        control={<Radio color="primary" />}
        label="Male"
      />
    </RadioGroup>
  </FormControl>
  ...
}

this.props.experience.availability是我从对后端的调用中得到的对象数组。通话正在componentDidMount()中进行。我使用Redux，它将结果用作道具。

现在，如果我在同一RadioGroup中手动添加了几个FormControlLabel组件，则可以看到在选择该选项后对其进行了检查。

我已经截取了两个屏幕截图-这是在选择手动FormControlLabel时：https://ibb.co/pL5Fy6L，而在选择了我的动态选项之一时：https://ibb.co/Jq7mLN4

您可以看到在第二个选项中，“女性”选项未被选中，但是我选择的选项（20-06-2019）似乎未被选中。

您能帮我解决这个问题吗？

谢谢！

Answer 1

对于任何可能面临相同问题的人，这就是我做错的事情。

问题是我将一个整数值而不是像value这样的字符串传递给value={single.id}道具，所以我添加了toString()来将它转换成这样的字符串：{{ 1}}，现在工作正常。

RadioGroup内部的Dynamic FormControlLabel Radio未得到检查

1 个答案: