Question

我试图在抽屉组件中使用可选择的项目列表。我正在使用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>

我希望这会让你知道我在做什么......

Answer 1

我终于意识到为什么它不起作用。有关此帖子的更多详情：SelectableList does not display Selected item when selection change

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

1 个答案: