reactjs - Material UI List onClick 触发嵌套列表上的 click 事件

Question

我的一个组件中有一个 Material 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

为什么会发生这种情况？

这是我的代码。

第二个列表代码

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

第一个列表

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