材质UI列表onClick在嵌套列表上触发单击事件

Question

我在其中一个组件中有一个材料ui列表.当我单击此列表中的任何项目时,我转到另一个listView.我正在使用路由器去另一个listView.并使用onClick方法.每当我点击第一个列表的任何列表项时,我都会打印"firstList clicked".每当我点击第二个列表中的任何项目时,它会打印"secondList clicked".

这是我的问题:当我单击第一个列表的ListItem时,console.log("secondList clicked")也会自动打印出"firstList Clicked".我在第二个列表中有四个列表项,所以我的控制台打印输出如下所示

firstList Clicked secondList Clicked secondList Clicked secondList Clicked secondList Clicked

为什么会这样？

这是我的代码.

SecondList代码

class TagListItemDetails extends Component {
    handleClick() {
        console.log("secondList clicked")
    }

    handleButtonClick() {
        browserHistory.push("TagList")
    }

    render() {

        return (
            <MuiThemeProvider>
                <div>
                    <List id="parent-list-tags">
                        <ListItem primaryText="Kitchen" onTouchTap={this.handleClick()}/>
                        <ListItem primaryText="Beach" onClick={this.handleClick()}/>
                        <ListItem primaryText="Marriage" onClick={this.handleClick()}/>
                        <ListItem primaryText="Garden" onClick={this.handleClick()}/>
                    </List>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
                    <div className="backButton">
                        <RaisedButton backgroundColor="#293C8E" label="Back" onClick={this.handleButtonClick} labelColor="white">

                        </RaisedButton>
                    </div>
                </div>
            </MuiThemeProvider>

        );
    }
}

const mapStateToProps =(state) =>{
    return {
        tags: state.tagReducer
    };
};

function matchDispatchToProps(dispatch){
    return bindActionCreators({tagSelected: tagSelected}, dispatch);
}

export default connect(mapStateToProps, matchDispatchToProps)(TagListItemDetails);

firstList

export default class TagList extends Component {


    handleClicked() {
        console.log("firstList Clicked")
        browserHistory.push("TagListItemDetails")
    }

    render() {

        return (
            <div>
                <List id="parent-list-tags" >
                    <ListItem primaryText="Scene" onClick={this.handleClicked}  />
                    <Divider/>
                    <ListItem primaryText="Actors" onClick={this.handleClicked} />
                    <Divider/>
                    <ListItem primaryText="Emotions" onClick={this.handleClicked} />
                    <Divider/>
                    <ListItem primaryText="Actions" onClick={this.handleClicked}/>
                    <Divider/>
                    <ListItem primaryText="Objects" onClick={this.handleClicked}/>
                    <Divider/>
                    <ListItem primaryText="Compliance" onClick={this.handleClicked} />
                </List>
                <AddButton />
            </div>

    )
    }
};

Answer 1

问题是,在加载组件时SecondList,您正在调用该handleClick方法.尝试()从onClick处理程序中删除括号.而不是

<ListItem primaryText="Beach" onClick={this.handleClick()}/>

您可以使用:

<ListItem primaryText="Beach" onClick={this.handleClick}/>
------------------------------------------------------^^ No parentheses here

将参数传递给作为prop传递的单击处理程序的一种方法是使用胖箭头函数:

onClick={() => this.props.itemSelected(2)}

// or if you want to pass the event as well: 

onClick={(event) => this.props.itemSelected(2, event)}

此外,这里是一个如何在onClick事件上触发两个函数的演示:http://codepen.io/PiotrBerebecki/pen/YGRQrG