Question

我的SelectableList存在问题。当我第一次显示列表时，在列表中选择默认定义的项目。但是，当我单击列表中的其他项目时，该项目在列表中显示为未选中，索引为SelectableList。有什么建议吗？

这是我import React from 'react'; import {List, ListItem, MakeSelectable} from 'material-ui/List'; import Avatar from 'material-ui/Avatar'; const SelectableList = MakeSelectable(List); class ListExampleSelectable extends React.Component { constructor() { super(); } componentWillMount() { this.setState({ selectedIndex: this.props.defaultValue, }); } handleRequestChange(event, index) { this.setState({ selectedIndex: index, }); console.log(index); }; render() { return ( <SelectableList value = {this.state.selectedIndex} onClick = {this.handleRequestChange.bind(this)} > <ListItem value="1" primaryText="Menu1" leftAvatar={<Avatar src="img1.png" />}/> <ListItem value="2" primaryText="Menu2" leftAvatar={<Avatar src="img2.png" />}/> <ListItem value="3" primaryText="Menu3" leftAvatar={<Avatar src="img3.png" />}/> </SelectableList> ); } } export default ListExampleSelectable;的示例代码：

import MyList from './ExampleSelectable.jsx';

我使用我的组件：

<MyList defaultValue="1"/>

在抽屉里面我有：

{{1}}

显示的列表中选择了第一个项目，但是当我单击其他项目时，选择不会在单击的项目上移动。

Answer 1

最后，事情进展顺利。如果你遇到这个问题，请记住以下几点：

1-喜欢@ erik-sn说，material-ui使用onChange代替onClick作为事件处理程序

2-我没有包含react-tap-event-plugin这就是为什么点击事件没有注册和处理的原因。所以安装react-tap-event-plugin。 Material-ui组件使用react-tap-event-plugin来监听touch / tap / clickevents。有关Material-ui getting started page的更多信息。关于react-tap-event-plugin here的更多信息。

安装后

用法：

var injectTapEventPlugin = require("react-tap-event-plugin"); injectTapEventPlugin();

3-在使用（或打印）单击的List Item的索引值时，为了避免未定义的值，不要忘记绑定到组件以便在回调中访问（有关此帖子的更多详细信息：{{3 }}

这是我的SelectableList组件的最终代码（ps：不介意类名和方法....）

＆＃13;

import React, {Component, PropTypes} from 'react';
import Avatar from 'material-ui/Avatar';
import {List, ListItem, MakeSelectable} from 'material-ui/List';

let SelectableList = MakeSelectable(List);

export default class DashboardPage extends React.Component {
        constructor(props) {
            super(props);
            this.state = {selectedIndex: 1};
        }

    handleRequestChange (event, index) {
        this.setState({
            selectedIndex: index
        })
    }

    render() {
        return (<div>{this.renderAside()}</div>);
    }

    renderAside() {
        return (
            <SelectableList value={this.state.selectedIndex} onChange={this.handleRequestChange.bind(this)}>
                <ListItem value={1} primaryText="Menu1" leftAvatar={<Avatar src="img1.png" />}/>
                <ListItem value={2} primaryText="Menu2" leftAvatar={<Avatar src="img2.png" />}/>
                <ListItem value={3} primaryText="Menu3" leftAvatar={<Avatar src="img3.png" />}/>
                <ListItem value={4} primaryText="Menu3" leftAvatar={<Avatar src="img4.png" />}/>
            </SelectableList>
        );
    }
}

＆＃13;

Answer 2

我相信material-ui使用onChange代替onClick作为事件处理程序：

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

因此，当您单击它时调用您的函数 - 但不传递任何参数。尝试将其更改为onChange。

选择更改时，SelectableList不显示所选项目

2 个答案: