Material-UI List 作为 Card 的子项，在主展开时触发所有 onClick

Posted 2023-03-08

【中文标题】Material-UI List 作为 Card 的子项，在主展开时触发所有 onClick

【英文标题】：Material-UI List as children of Card, fires all onClick on main expand

【发布时间】：2016-07-13 23:29:51

【问题描述】：

Material-UI、Meteor、React

所以我想在卡片内嵌套一个带有 onTouchTap（或 onClick）函数的下拉列表。

它似乎工作正常，一切都没有问题 - 但是当您展开父卡时，列表中的所有内容都会同时触发 onTouchTap。

我已经厌倦了将其他 Card 元素相互嵌套以达到相同的效果。

这只是代码的限制，还是有一些解决方法？

                    <Card>
            <CardHeader
                title=this.props.foodItem.foodName
                subtitle=this.genPrtnImg()
                avatar=this.props.foodItem.imgURL
                actAsExpander=true
                showExpandableButton=true

            />
            <CardText expandable=true>
                <List subheader="Item Requests">
                    <ListItem
                    primaryText=userName
                    secondaryText="Has requested " + prtNo + " portions"
                    leftAvatar=<Avatar src="http://thesocialmediamonthly.com/wp-content/uploads/2015/08/photo.png" />
                    primaryTogglesNestedList=true
                    nestedItems=[
                         <ListItem
                            key=1
                            primaryText="Accept"
                            leftIcon=<SvgIcons.ActionCheckCircle color='Green'/>
                            onTouchTap=this.handleAccept(userName, prtNo)
                         />,
                         <ListItem
                            key=2
                            primaryText="Reject"
                            leftIcon=<SvgIcons.ContentBlock color='Red'/> 
                            onTouchTap=this.handleReject(userName)
                         />,
                    ]

                />
              </List>
            </CardText>

              </Card>

任何帮助将不胜感激，谢谢！

【问题讨论】：

您是否尝试在卡片的 onTouchTap 处理程序上调用 event.stopPropagation() 或 event.preventDefault()？我怀疑它是否会起作用，因为我主要在尝试防止事件冒泡时使用该技巧，但值得一试。

由于您将卡的标题用作扩展器，因此您可能必须切换到卡的手动控制才能尝试此操作。

感谢您的建议，我将有一个戏剧，让你知道会发生什么！ :)

好吧，这似乎不起作用。我发现如果我在不传递变量的情况下调用函数，那么就没有问题....除了我需要这些变量，哈哈。有任何想法吗？例如onClick=this.handleAccept，而不是 onClick=this.handleAcceptuserName

哦，现在我看到了问题所在。 onClick=this.handleAccept(userName) 将不起作用。这将在实例化时调用this.handleAccept，而不是在事件触发时调用。您必须使用部分或闭包来获取这些变量。我将通过示例发布答案。

【参考方案1】：

onClick=this.handleAccept(userName, prtNo) 将不起作用。这将在实例化时调用this.handleAccept，而不是在事件触发时调用。您必须使用部分或闭包来获取这些变量。

以下是使用闭包的方法：

getAcceptHandler: function(userName, prtNo) 
  handleAccept = function(event) 
    do_something_with_event_or_ignore_it = event.target...
    do_something_with_userName_and_or_prtNo = userName + prtNo
    this.save(do_something_with_userName_and_or_prtNo)
    ...
  
  return handleAccept

然后像这样更改 JSX：

<ListItem
    key=1
    primaryText="Accept"
    leftIcon=<SvgIcons.ActionCheckCircle color='Green'/>
    onTouchTap=this.getAcceptHandler(userName, prtNo)
/>,

【参考方案2】：

如果你使用 ES6，有一个更简单的方法来解决这个问题

您可以将 onClick 方法更改为：

onClick=() =>  this.handleAccept(userName, prtNo) 

【讨论】：

它与其他浏览器/手机的兼容性如何？

您可以使用 babel 将所有 ES6 转换为 ES5，以便在所有（我知道的）浏览器/手机上正确呈现