React Material UI RadioGroup无法与组件

时间:2018-12-30 18:40:34

标签: reactjs material-ui

在将材料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 函数中,则一切正常。

我做错什么了吗?或者这仅仅是对用户界面的限制?

1 个答案:

答案 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属性。

这是一个可行的示例:

Edit pk50jkxqz7