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

时间:2019-06-13 08:13:01

标签: javascript reactjs material-ui

我正在使用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)似乎未被选中。

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

谢谢!

1 个答案:

答案 0 :(得分:1)

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

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