React Material UI RadioGroup无法与组件

Question

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

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

Answer 1

如果查看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属性。

这是一个可行的示例：