javascript - Material-UI List as children of Card, fires all onClick on main expand - Stack Overflow

admin管理员组

文章数量:1287597

Material-UI, Meteor, React

So I want to nest a drop down list with onTouchTap (or onClick) functions inside of a card.

It seems to work fine, renders everything no bother - but when you expand the parent card, all in the list the onTouchTap fire at the same time.

I have tired also nesting other Card elements inside each other to the same effect.

Is this just a restriction of the code, or is there some work around?

                    <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=".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>

Any help would be greatly appreciated, thanks!

Material-UI, Meteor, React

So I want to nest a drop down list with onTouchTap (or onClick) functions inside of a card.

It seems to work fine, renders everything no bother - but when you expand the parent card, all in the list the onTouchTap fire at the same time.

I have tired also nesting other Card elements inside each other to the same effect.

Is this just a restriction of the code, or is there some work around?

                    <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./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>

Any help would be greatly appreciated, thanks!

• javascript
• jquery
• meteor
• reactjs
• material-ui

Share Improve this question Follow asked Mar 26, 2016 at 7:57 George BattyGeorge Batty 11522 silver badges1010 bronze badges 5

• Have you tried calling event.stopPropagation() or event.preventDefault() on the onTouchTap handler for the Card? I have my doubts that it will work because I use that trick mostly when I'm trying to prevent events from bubbling but it's worth a try. – Larry Maccherone Commented Mar 26, 2016 at 12:52
• Since you have the header of the Card serving as the expander, you may have to switch to manual control of the Card to even try this. – Larry Maccherone Commented Mar 26, 2016 at 12:54
• Thanks for the suggestions, I will have a play and let you know what happens! :) – George Batty Commented Mar 26, 2016 at 17:31
• Ok, that didn't seem to work. I've found out that if i call the function without passing variables then there is no problem....except that I need those variables, haha. Any ideas? e.g. onClick={this.handleAccept}, not onClick={this.handleAccept{userName} – George Batty Commented Mar 26, 2016 at 18:56
• Ohh now I see the problem. onClick={this.handleAccept(userName)} will not work. That will call this.handleAccept when it instantiates, NOT when the event triggers. You'll have to use a partial or a closure to get those variables. I'll post an answer with an example. – Larry Maccherone Commented Mar 26, 2016 at 19:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

There's a simpler way around this if you're using ES6

You can change your onClick method to:

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

onClick={this.handleAccept(userName, prtNo)} will not work. That will call this.handleAccept when it instantiates, NOT when the event triggers. You'll have to use a partial or a closure to get those variables.

Here's how you'd do it with a closure:

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
}

Then change the JSX like this:

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

本文标签： javascriptMaterialUI List as children of Cardfires all onClick on main expandStack Overflow