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>
非常感谢任何帮助,谢谢!
答案 0 :(得分:7)
如果你使用ES6
,有一个更简单的方法您可以将onClick方法更改为:
onClick={() => { this.handleAccept(userName, prtNo) }}
答案 1 :(得分:4)
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)}
/>,