时间戳

首页 > 解决方案 > RadioGroup 中的动态 FormControlLabel Radio 没有得到检查

javascript - RadioGroup 中的动态 FormControlLabel Radio 没有得到检查

问题描述

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

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

提前致谢！

标签： javascriptreactjsmaterial-ui

解决方案

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

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

推荐阅读