Question

Material-UI，Meteor，React

所以我想在卡片中嵌入带有onTouchTap（或onClick）功能的下拉列表。

它似乎运行正常，渲染一切都没有麻烦 - 但是当你展开父卡时，同时在onTouchTap列表中的所有内容都会激活。

我已经厌倦了将其他卡片元素嵌套在一起以达到同样的效果。

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

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

Answer 2

onClick={this.handleAccept(userName, prtNo)}无效。这将在实例化时调用this.handleAccept，而不是在事件触发时调用。你必须使用partial或闭包来获取这些变量。

以下是关闭闭包的方法：

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)}
/>,

Material-UI List作为Card的子项，触发所有onClick on main expand

2 个答案: