Material-UIから選択可能なリストの基本例

Question

私の引き出しコンポーネントに選択可能なアイテムのリストを使用しようとしています。 ImマテリアルUIドキュメンテーション（Material-UI List Documentation）で定義されているサンプルコードを使用していますが、物事が期待どおりに機能していません。 ここで誰でもSelectableリストを使って基本的なサンプルコードを手伝ったり、良いドキュメントやチュートリアルを教えてくれますか？

import React from 'react'; 
 
import Component from 'react'; 
 
import PropTypes from 'react'; 
 
import MobileTearSheet from '../../../MobileTearSheet'; 
 
import {List, ListItem, MakeSelectable} from 'material-ui/List'; 
 
import Avatar from 'material-ui/Avatar'; 
 
import Subheader from 'material-ui/Subheader'; 
 

 
let SelectableList = MakeSelectable(List); 
 

 
function wrapState(ComposedComponent) { 
 
    return class SelectableList extends Component { 
 
     static propTypes = { 
 
      children: PropTypes.node.isRequired, 
 
      defaultValue: PropTypes.number.isRequired, 
 
     }; 
 

 
     componentWillMount() { 
 
      this.setState({ 
 
       selectedIndex: this.props.defaultValue, 
 
      }); 
 
     } 
 

 
     handleRequestChange = (event, index) => { 
 
      this.setState({ 
 
       selectedIndex: index, 
 
      }); 
 
     }; 
 

 
     render() { 
 
      return (
 
       <ComposedComponent value={this.state.selectedIndex} onChange={this.handleRequestChange}> 
 
        {this.props.children} 
 
       </ComposedComponent> 
 
      ); 
 
     } 
 
    }; 
 
} 
 

 
SelectableList = wrapState(SelectableList); 
 

 
const ListExampleSelectable =() => (
 
    <MobileTearSheet> 
 
     <SelectableList defaultValue={3}> 
 
      <Subheader>Selectable Contacts</Subheader> 
 
      <ListItem 
 
       value={1} 
 
       primaryText="Brendan Lim" 
 
       leftAvatar={<Avatar src="/images/obenbasic.png" />} 
 
       nestedItems={[ 
 
      <ListItem 
 
      value={2} 
 
      primaryText="Grace Ng" 
 
      leftAvatar={<Avatar src="/images/obenbasic.png" />} 
 
      />, 
 
     ]} 
 
      /> 
 
      <ListItem 
 
       value={3} 
 
       primaryText="Kerem Suer" 
 
       leftAvatar={<Avatar src="/images/obenbasic.png" />} 
 
      /> 
 
      <ListItem 
 
       value={4} 
 
       primaryText="Eric Hoffman" 
 
       leftAvatar={<Avatar src="/images/obenbasic.png" />} 
 
      /> 
 
      <ListItem 
 
       value={5} 
 
       primaryText="Raquel Parrado" 
 
       leftAvatar={<Avatar src="/images/obenbasic.png" />} 
 
      /> 
 
     </SelectableList> 
 
    </MobileTearSheet> 
 
); 
 

 
export default ListExampleSelectable;

と私はこのような選択可能なリストを使用します。私は、これはあなたに私がやっているかのアイデアを与えることを願っています

<Drawer open={false} width="180px" > 
    <MenuItem primaryText="MENU ITEM" /> 
    <ListExampleSelectable /> 
</Drawer> 

...

Answer 1

私はついにそれが働いていない理由を理解しました。この投稿の詳細：SelectableList does not display Selected item when selection change