Material UI List onClick 在嵌套列表上触发点击事件

Posted 2023-02-22

【中文标题】Material UI List onClick 在嵌套列表上触发点击事件

【英文标题】：Material UI List onClick fires click event on nested list

【发布时间】：2017-03-01 13:45:39

【问题描述】：

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

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

第一个点击列表 secondList 点击 secondList 点击 secondList 点击 secondList 点击了

为什么会这样？

这是我的代码。

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

第一个列表

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>

    )
    
;

【问题讨论】：

在 SecondList 中，您在渲染组件时调用了 handleClick 方法。尝试从 onClick 处理程序中删除括号 ()：onClick=this.handleClick

成功了。但是，如果我想在 secondList 中用我的动作作为道具做一些事情，就像这样： onClick=this.props.itemSelected(2) 。其中 itemSelected 是动作函数，2 是我传递的参数。我这里说的是 react-redux。

作为一个快速修复，您应该能够使用像这样的粗箭头函数：onClick=() => this.props.itemSelected(2) 让我知道它是否有效。这是一个演示：codepen.io/PiotrBerebecki/pen/YGRQrG

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

如果你使用onClick=() => this.props.itemSelected(2)，你会得到这个错误吗？你不应该使用onClick=this.props.itemSelected(2)。

【参考方案1】：

问题在于，在SecondList 中，您在加载组件后立即调用handleClick 方法。尝试从 onClick 处理程序中删除括号 ()。所以不是

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

你可以使用：

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

将参数传递给作为道具传递的点击处理程序的一种方法是使用粗箭头函数：

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

【讨论】：

以上内容是否回答了您的问题，或者您希望我补充什么？

我有一个问题，但是。如果我想将这两者、动作以及handleClickEvent 方法都传递给我的onClick，我应该怎么做。我该怎么做？

您可以像这样传递事件：<div onClick=(event) => this.props.onClick('Secret message', event)> 看看更新后的 codepen。

我想在 onClick 上触发两个函数，而不是消息和事件

没问题 :) 我已经更新了 codepen，在点击时触发了两个函数。