我正在使用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)似乎未被选中。
您能帮我解决这个问题吗?
谢谢!
答案 0 :(得分:1)
对于任何可能面临相同问题的人,这就是我做错的事情。
问题是我将一个整数值而不是像value
这样的字符串传递给value={single.id}
道具,所以我添加了toString()
来将它转换成这样的字符串:{{ 1}},现在工作正常。