Material-UI 中可选列表的基本示例答案

【问题标题】：Basic example of Selectable list from Material-UIMaterial-UI 中可选列表的基本示例
【发布时间】：2017-01-13 05:19:10
【问题描述】：

我试图在我的抽屉组件中使用可选的项目列表。我使用 Material-ui 文档 (Material-UI List Documentation) 中定义的示例代码，但事情并没有按预期工作。这里的任何人都可以帮助我使用可选列表的基本示例代码，或者向我指出任何好的文档或教程。

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>

我希望这能让你了解我在做什么......

【问题讨论】：

您能否详细说明“未按预期工作”的含义？或者，如果您只是在寻找帮助您学习的资源，那么我认为这超出了 Stack Overflow 的范围。
好吧，我不允许在这里提供我的来源，如果这是你评论的重点。
你能提供错误信息吗？或者如果你不能提供源代码会发生什么？没有至少一点特异性，任何人都无法为您提供帮助。
假设我在 jsx 文件中有整个 sample code of selectable list，当我在抽屉中导入“ListExampleSelectable”组件时，我在 jsx 文件中出现以下错误（模块构建失败： SyntaxError: Unexpected token (13:25))。
我只是想弄清楚如何使用 material-ui 中的可选列表组件，因为显然我做错了什么。

标签： reactjs material-ui

【解决方案1】：

我终于明白为什么它不起作用了。这篇文章的更多细节：SelectableList does not display Selected item when selection change

【讨论】：

对我来说这是因为我没有设置 ListItem 值属性