Reactjs React Material UI RadioGroup不使用组件返回的FormControlLabel

我在使用material 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>

{
this.state.genres.map（流派=>(
))
}

GenreItem的渲染函数如下所示：

if (this.props.radioButton) {
  return (
    <FormControlLabel
      value={this.props.label}
      label={this.props.label}
      control={
        <Radio/>
      }
      className="genre-item"
    />
  );
}
// Another return here

if（此.props.radioButton）{
返回(
);
}
//再来一次

我的问题是FormControlLabel无法正常工作，因为任何选择都不会触发“handleRadioSelection”

现在我发现从Radio元素生成的输入元素没有name=“genreSelection”作为属性，这意味着它不属于上面定义的RadioGroup

如果我将FormControlLabel从GenreItem中取出并直接放入this.state.genres.map函数，那么一切都正常工作

---

我是做错了什么，还是这只是材质UI的一个限制？

如果你查看的代码，你会发现它克隆了你提供给它的子元素，并添加了几个属性。您需要将这些属性下放到

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"
    />

//单独分配radioButton，使其不属于labelProps的一部分
const{radioButton，…labelProps}=this.props；
if（单选按钮）{

添加

{…labelProps}

将继承RadioGroup添加的道具

另外，如果希望标签和值相同，则必须将

值

显式传递给

GenreItem

，而不是

标签

，因为

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"
    />

//单独分配radioButton，使其不属于labelProps的一部分
const{radioButton，…labelProps}=this.props；
if（单选按钮）{

添加
{…labelProps}
将继承RadioGroup添加的道具

另外，如果希望标签和值相同，则必须将
值
显式传递给
GenreItem
，而不是
标签
，因为
RadioGroup
使用
值
属性帮助确定
选中的属性

下面是一个工作示例：

谢谢您的回复。通过您建议的更改，我得到了
警告：收到了非布尔属性“radiobutton”的“true”。
看起来label元素无法处理我的属性。我找到的解决方法是添加
radiobutton=“something”
到FormControlLabel。但是这是一个非常脏的。而且我现在必须自己处理Radio元素的checked属性…谢谢！现在看起来很好。尽管我必须自己设置Radio元素的checked属性。但是这对我来说完全没问题。你不应该在Radio元素上设置任何东西。我的exaMPE不是。我意识到为什么checked不适用于您，请参阅我的更新答案（您需要将值显式传递给GenreItem）。是的，这就是最后的诀窍！我永远不会知道这一点>\u>非常感谢：）谢谢你的回复。通过你建议的更改，我得到了
警告：收到了非布尔属性“radiobutton”的“true”。
。看起来label元素无法处理我的属性。我找到的解决方法是添加
radiobutton=“什么"
到FormControlLabel。但是这是一个非常脏的。而且我现在必须自己处理Radio元素的checked属性…谢谢！现在看起来很好。尽管我必须自己设置Radio元素的checked属性。但是这对我来说完全没问题。你不应该在Radio元素上设置任何东西。我的exaMPE不是。我意识到为什么checked不适用于您，请参阅我的更新答案（您需要将值显式传递给GenreItem）。是的，这就是最后的诀窍！我永远也不会发现这一点>\u>非常感谢：）