入れ子リスト内のRadioButtonGroup

Question

私はMaterial-UIを使用しています。List/ListItemコンポーネントを使用してラジオボタンをグループ化したいと思います。この1と同様に

：

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

これよりも良い解決策があることを願っています。