Материал-UI Список как дети карты, пожары все OnClick на главной расширения

Question

Материал-интерфейс, Метеор, 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

onClick={this.handleAccept(userName, prtNo)} не будет работать. Это вызовет this.handleAccept при его создании, а не когда событие срабатывает. Для получения этих переменных вам придется использовать частичное или закрытие.

Вот как вы могли бы сделать это с крышкой:

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

Answer 2

Там более простой способ обойти это, если вы используете ES6

Вы можете изменить метод onClick на:

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