Material ui 嵌套列表中的RadioButtonGroup

我正在使用Material UI，我想使用List/ListItem组件对我的单选按钮进行分组。

与此类似：

<RadioButtonGroup ...>
  <List>
    <ListItem
      ...
      nestedItems={[
        <RadioButton ... />,
        <RadioButton ... />
      ]}
    />
    <ListItem
      ...
      nestedItems={[
        <RadioButton ... />,
        <RadioButton ... />
      ]}
    />
  </List>
</RadioButtonGroup>

有没有办法存档

---

谢谢。

我的临时解决办法是使用外观和行为都像单选按钮的复选框

import List from 'material-ui/lib/lists/list';
import ListItem from 'material-ui/lib/lists/list-item';
import Checkbox from 'material-ui/lib/checkbox';
import RadioChecked from 'material-ui/lib/svg-icons/toggle/radio-button-checked';
import RadioUnchecked from 'material-ui/lib/svg-icons/toggle/radio-button-unchecked';

...

onChangeRadio = (event) => this.setState({ radioValue: event.target.value });

...
<List>
  <ListItem
    primaryText='First Group'
    primaryTogglesNestedList={true}
    nestedItems={[
      <ListItem                               
        primaryText='Radio 1'
        leftCheckbox={
          <Checkbox
            value='1'
            onCheck={this.onChangeRadio}
            checked={this.state.radioValue == '1'}
            checkedIcon={<RadioChecked />}
            unCheckedIcon={<RadioUnchecked />}
          />
        }                  
      />
      <ListItem                               
        primaryText='Radio 2'
        leftCheckbox={
          <Checkbox
            value='2'
            onCheck={this.onChangeRadio}
            checked={this.state.radioValue == '2'}
            checkedIcon={<RadioChecked />}
            unCheckedIcon={<RadioUnchecked />}
          />}                  
        />
      ]}
    />
  <ListItem
    primaryText='Second Group'
    primaryTogglesNestedList={true}
    nestedItems={[
      <ListItem                               
        primaryText='Radio 3'
        leftCheckbox={
          <Checkbox
            value='3'
            onCheck={this.onChangeRadio}
            checked={this.state.radioValue == '3'}
            checkedIcon={<RadioChecked />}
            unCheckedIcon={<RadioUnchecked />}
          />
        }                  
      />
      <ListItem                               
        primaryText='Radio 4'
        leftCheckbox={
          <Checkbox
            value='4'
            onCheck={this.onChangeRadio}
            checked={this.state.radioValue == '4'}
            checkedIcon={<RadioChecked />}
            unCheckedIcon={<RadioUnchecked />}
          />
        }                  
      />
    ]}
  />
</List>

从“物料ui/lib/lists/List”导入列表；
从“物料界面/库/列表/列表项”导入列表项；
从“物料ui/lib/Checkbox”导入复选框；
从“材料ui/lib/svg图标/切换/单选按钮选中”导入RadioChecked；
从“材料ui/lib/svg图标/切换/单选按钮未选中”导入未选中的RadioUnchecked；
...
onChangeRadio=（event）=>this.setState（{radioValue:event.target.value}）；
...

我希望有比这更好的解决方案。

也许这会有所帮助

从“React”导入React；
从“道具类型”导入道具类型；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/List”导入列表；
从“@material ui/core/ListItem”导入ListItem；
从“@material ui/core/ListItemSecondaryAction”导入ListItemSecondaryAction；
从“@material ui/core/ListItemText”导入ListItemText；
从“@material ui/core/Checkbox”导入复选框；
从“@material ui/core/IconButton”导入IconButton；
从“@material ui/icons/Comment”导入CommentIcon；
从“@material ui/core/Radio”导入无线电；
从“@material ui/core/RadioGroup”导入射线组；
从“@material ui/core/FormHelperText”导入FormHelperText；
从“@material ui/core/FormControlLabel”导入FormControlLabel；
从“@material ui/core/FormControl”导入FormControl；
从“@material ui/core/FormLabel”导入FormLabel；
常量样式=主题=>({
根目录：{
宽度：“100%”，
最大宽度：360，
溢出：“自动”，
最大高度：500，
背景色：theme.palete.background.paper，
},
});
类RadioList扩展了React.Component{
状态={
选中：0，
};
handleToggle=值=>（）=>{
this.setState（{checked:value}）；
};
render（）{
const{classes}=this.props；
返回(
{[0,1,2,3,4,5,6,7,8,9,10].map（值=>(
))}
);
}
}
RadioList.propTypes={
类：PropTypes.object.isRequired，
};
导出默认样式（样式）（RadioList）此方法有问题吗？是的，RadioButtonGroup需要RadioButton组件数组，并且不接受数组中的任何列表/列表项。我无法让它以这种方式工作。这是列表的完整组件，带有单选按钮和一些测试数据。添加导入：从“../../commonComponent/RadioList”导入RadioList；然后使用相当干净的。代码中似乎有一些小错误需要纠正，但总体来说它是有效的。