material-ui - 嵌套列表中的 RadioButtonGroup

Question

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

与此类似:

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

有办法存档吗？

谢谢。

Answer 1

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

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>

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