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

Question

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>

非常感谢任何帮助，谢谢!

Answer 1

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

您可以将您的 onClick 方法更改为:

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