React Material UI RadioGroup无法与组件返回的FormControlLabel一起使用 [英] React Material UI RadioGroup not working with FormControlLabel returned by component

问题描述

在将材料UI RadioGroup与组件返回的FormControlLabel结合使用时，我遇到问题.

目前，我尝试这样做:

 < FormControl component ="fieldset"><广播组排名称=流派选择"className ="genre-wrapper"值= {this.state.selection}onChange = {this.handleRadioSelection}>{this.state.genres.map(genre =>(< GenreItem键= {流派}标签= {流派} radioButton/>))}</RadioGroup></FormControl> 

GenreItem 的呈现功能如下:

if (this.props.radioButton) {返回 (< FormControlLabel值= {this.props.label}标签= {this.props.label}控制= {< Radio/>}className="流派项目"/>);}//另一个返回这里 

我的问题是 FormControlLabel 不能正常工作，因为"handleRadioSelection" 没有在任何选择上触发.

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

如果将 FormControlLabel 从 GenreItem 中放出，然后直接放入 this.state.genres.map 函数中，则一切正常.

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

解决方案

如果您查看

I have an issue working with the material UI RadioGroup in combination with FormControlLabels returned by a component.

Currently I try this:

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

And the render function of GenreItem looks like this:

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

My problem is that the FormControlLabel isn't working correctly as "handleRadioSelection" isn't triggered on any selection.

By now I found out that the input element generated from the Radio element doesn't have name="genreSelection" as attribute which means it doesn't belong to the RadioGroup defined above.

If I put the FormControlLabel out of GenreItem and directly into the this.state.genres.map function everything is working just fine.

Am I doing something wrong or is this just a limitation of material UI?

解决方案

If you look at the code of RadioGroup you'll find that it clones the children that you provide to it and adds several properties. You need to carry those properties down into FormControlLabel. You can accomplish that by changing GenreItem to render the FormControlLabel as follows:

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

Adding {...labelProps} will carry forward the props added by RadioGroup.

Also if you want the label and value to be the same, it is important to pass value explicitly to GenreItem rather than label since RadioGroup uses the value prop to help determine the checked property.

Here's a working example:

这篇关于React Material UI RadioGroup无法与组件返回的FormControlLabel一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！