Material-UI에서 선택 가능한 목록의 기본 예제

Question

내 서랍 구성 요소에서 선택 가능한 항목 목록을 사용하려고합니다. Im Material-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