Material UI列表的onClick会在嵌套列表上触发单击事件

Question

我在我的一个组件中有一个Material UI列表。当我点击此列表的任何项时，我会进入另一个ListView。我正在使用router转到另一个ListView，并使用onClick方法。每当我点击第一个列表的任何列表项时，我打印“firstList clicked”。每当我点击第二个列表的任何项时，它打印“secondList clicked”。

我的问题在于：当我点击第一个列表的ListItem时，“secondList clicked”的console.log（“secondList clicked”）也会自动打印出“firstList Clicked”。我的第二个列表中有四个列表项，因此我的控制台打印输出如下：

firstList Clicked
secondList Clicked
secondList Clicked
secondList Clicked
secondList Clicked

为什么会发生这种情况？

以下是我的代码。

SecondList code

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>

    )
    }
};

- EdG

---

在 SecondList 中，当组件被渲染时，你正在调用 handleClick 方法。尝试从 onClick 处理程序中删除括号 ()：onClick={this.handleClick}。 - Piotr Berebecki

作为快速解决方案，您应该能够使用一个箭头函数，例如：onClick={() => this.props.itemSelected(2)}让我知道它是否有效。这是一个演示：http://codepen.io/PiotrBerebecki/pen/YGRQrG - Piotr Berebecki

当我尝试使用onClick={this.props.itemSelected(2)}时，它给了我这个错误：无法在现有状态转换期间更新（例如在render或另一个组件的构造函数中）。Render方法应该是props和state的纯函数；构造函数副作用是一种反模式，但可以移动到componentWillMount。 - EdG

非常感谢，它起作用了。 - EdG

很高兴能帮到你 :) 我已经将上述内容写成答案，以便社区更容易参考。 - Piotr Berebecki

Answer 1

问题在于在SecondList中，组件被加载时立即调用了handleClick方法。尝试从onClick处理程序中删除括号()。因此，改为

问题是，在SecondList中，加载组件时立即调用handleClick方法。尝试从onClick处理程序中删除括号()。因此，而不是：

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

你可以使用：

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

将参数传递给作为prop传递的点击处理程序的一种方法是使用fat arrow函数：

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

- Piotr Berebecki

---

你可以这样传递事件：<div onClick={(event) => this.props.onClick('秘密信息', event)}> 请查看更新后的 CodePen。 - Piotr Berebecki

我想在单击时执行两个函数，而不是消息和事件。 - EdG

没问题 :) 我已经更新了 Codepen，添加了两个在点击时触发的函数。 - Piotr Berebecki

所以我不理解它。你能否为我的代码编写准确的代码行，使其正常工作？这将是一个很大的帮助。 - EdG

请添加一个 CodePen 或 JSFiddle 来解释问题，这样我才能帮助你。否则我们会陷入循环 :) - Piotr Berebecki