在将材料UI RadioGroup与组件返回的FormControlLabel结合使用时,我遇到问题。
目前,我尝试这样做:
<FormControl component="fieldset">
<RadioGroup
row
name="genreSelection"
className="genre-wrapper"
value={this.state.selection}
onChange={this.handleRadioSelection}
>
{
this.state.genres.map(genre => (
<GenreItem key={genre} label={genre} radioButton/>
))
}
</RadioGroup>
</FormControl>
GenreItem 的呈现功能如下:
if (this.props.radioButton) {
return (
<FormControlLabel
value={this.props.label}
label={this.props.label}
control={
<Radio/>
}
className="genre-item"
/>
);
}
// Another return here
我的问题是 FormControlLabel 不能正常工作,因为“ handleRadioSelection” 没有在任何选择上触发。
现在我发现从Radio元素生成的输入元素没有 name =“ genreSelection” 作为属性,这意味着它不属于上面定义的RadioGroup。
>如果我将 FormControlLabel 从 GenreItem 中放出并直接放入 this.state.genres.map 函数中,则一切正常。
我做错什么了吗?或者这仅仅是对用户界面的限制?
答案 0 :(得分:2)
如果查看RadioGroup的代码,您会发现它会克隆您提供给它的子代并添加几个属性。您需要将这些属性带入FormControlLabel
中。
您可以通过更改GenreItem
来呈现FormControlLabel
,如下所示:
// assign radioButton separately so it isn't part of labelProps
const { radioButton, ...labelProps } = this.props;
if (radioButton) {
<FormControlLabel {...labelProps }
label={this.props.value}
control={
<Radio/>
}
className="genre-item"
/>
添加{...labelProps}
将结转RadioGroup添加的道具。
此外,如果您希望标签和值相同,则必须将value
显式传递给GenreItem
而不是label
,因为RadioGroup
使用{{ 1}}属性来帮助确定value
属性。
这是一个可行的示例: