Materiale-UI List come figli di carta, spara tutte onClick sulla principale espandere

Question

Materiale-UI, Meteor, Reagire

Quindi voglio nido un elenco a discesa con onTouchTap (o onClick) verso il basso le funzioni all'interno di una carta.

Sembra funzionare correttamente, non rende tutto il problema, ma quando si espande la scheda padre, tutti nella lista l'attivazione di onTouchTap allo stesso tempo.

Ho stanco anche nidificare altri elementi della carta l'uno dentro l'altro allo stesso effetto.

Questa è solo una restrizione del codice o ci sono dei problemi?

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

Qualsiasi aiuto sarebbe molto apprezzato, grazie!

Answer 1

onClick={this.handleAccept(userName, prtNo)} non funziona. Questo chiamerà this.handleAccept quando crea un'istanza, NON quando l'evento si innesca. Dovrai usare una parte o una chiusura per ottenere quelle variabili.

Ecco come si farebbe con una chiusura:

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 
} 

quindi modificare le JSX in questo modo:

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

Answer 2

C'è un modo più semplice intorno a questo se si sta utilizzando ES6

È possibile modificare il metodo onClick su:

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