2016-03-26 3 views
5

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

Так что я хочу, чтобы гнездиться выпадающий список с 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

Вы пытались вызвать 'event.stopPropagation()' или 'event.preventDefault()' в обработчике onTouchTap для Карты? У меня есть сомнения, что это сработает, потому что я использую этот трюк в основном, когда я пытаюсь помешать событиям пузыряться, но это стоит попробовать. –

+0

Поскольку у вас есть заголовок Карты, выступающей в качестве расширителя, вам может потребоваться переключиться на ручное управление Картой, чтобы даже попробовать это. –

+0

Спасибо за предложения, у меня будет игра и дайте знать, что происходит! :) –

ответ

4

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

блестящий, сработал отлично! Большое спасибо :) –

5

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

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

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

Насколько совместимо это с другими браузерами/телефонами? –

+1

Вы можете использовать babel для перевода всех ES6 в ES5, которые будут отображаться правильно на всех (что я знаю) браузерах/телефонах –

 Смежные вопросы

  • Нет связанных вопросов^_^