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

Question

我对 SelectableList 有疑问。当我第一次显示列表时，默认定义的项目在列表中被选中。但是当我点击列表的不同项目时，该项目在列表中没有显示为选中状态，索引为 undefined。有什么建议吗？

这是我的示例代码 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"/>

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

Answer 1

我认为 material-ui 使用 onChange 而不是 onClick 作为事件处理程序：

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

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

Answer 2

终于，事情进展顺利。如果您遇到此问题，请记住以下几点：

1- 正如@erik-sn 所说，material-ui 使用 onChange 而不是 onClick 作为事件处理程序

2- 我没有包括 react-tap-event-plugin 这就是为什么没有注册和处理点击事件的原因。所以安装react-tap-event-plugin。 Material-ui 组件使用 react-tap-event-plugin 来监听触摸/点击/点击事件。有关 Material-ui getting started page. More infos about react-tap-event-plugin here.

的更多信息

安装后的用法：

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

3- 为避免在使用（或打印）被点击列表项的索引值时出现未定义的值，不要忘记绑定到组件以便在回调中访问（关于此的更多详细信息post :

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

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>
        );
    }
}

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

SelectableList does not display Selected item when selection change

reactjs

material-ui