选择更改时，SelectableList不显示“选择的项目" [英] SelectableList does not display Selected item when selection change

问题描述

我对SelectableList有问题.当我第一次显示列表时，将在列表中选择默认定义的项目.但是，当我单击列表的其他项目时，该项目未如列表中所选择的那样出现，并且索引为undefined.有什么建议吗?

I have an issue with a SelectableList. When i display the list for the first time, the default defined item is selected in the list. But when i click on a different item of the list, the item does not appears as selected in the list, and the index is undefined. any suggestions ?

这是我的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"/>

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

The list is displayed with the first item selected, but when i click on a different item, the selection does not move on the clicked item.

推荐答案

最后，事情进展顺利.如果遇到此问题，请记住以下几点:

Finally, things are working great. keep in mind these few things if you have this issue:

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

1- Like @erik-sn said, material-ui uses onChange instead of onClick as the event handler

2-我没有加入react-tap-event-plugin，这就是为什么未注册和处理点击事件的原因.因此，安装react-tap-event-plugin. Material-ui组件使用react-tap-event-plugin来监听touch/tap/clickevents.有关材料ui入门页面的详细信息.有关react-tap-event-plugin 此处的更多信息.

2- I wasn't including the react-tap-event-plugin that's why the click events not registered and handled. So install the react-tap-event-plugin. Material-ui Components use react-tap-event-plugin to listen for touch / tap / clickevents. More info on the Material-ui getting started page. More infos about react-tap-event-plugin here.

用法:

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

3-为了避免在使用(或打印)单击的List Item的索引值时产生未定义的值，请不要忘记绑定到组件以便可以在回调中进行访问(有关此帖子的更多详细信息:反应this.setState不是函数

3- To avoid the undefined value when using (or printing) the index value of the clicked List Item, dont forget to bind to the component in order to have access in the callback (more detail on this post : React this.setState is not a function

这是我的SelectableList组件的最终代码(ps:不要介意类名和方法....)

This is the final code of my SelectableList component (ps: dont mind the class name and method....)

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不显示“选择的项目"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！