嵌套列表中的RadioButtonGroup [英] RadioButtonGroup within nested List

问题描述

我正在使用Material-UI，并且我想使用List/ListItem组件对单选按钮进行分组.

与此类似:

I'm using Material-UI and I'd like to use the List/ListItem Component to group my Radio Buttons.

Similar to this one:

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

有没有办法将其存档?

谢谢.

推荐答案

我的临时解决方法是使用外观和行为类似于单选按钮的复选框.

My temporary workaround is to use checkboxes which look and behave like radio buttons.

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>

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

I hope there is a better solution than this.

这篇关于嵌套列表中的RadioButtonGroup的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！