2016-08-03 5 views
0

Вот моя строка кода, которая имеет проблемы:onClick не работает в React при использовании Onsen List?

<ons-list-item onclick={this.toBonusSummary} tappable>Bonus Summary</ons-list-item> 

В основном toBonusSummary просто изменяет состояние самого компонента, который должен вынести новое содержание при нажатии списка.

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что я получаю Неожиданный токен (. Я попытался изменить onclick на другие функции, и они не работают только в этой строке кода.

Мои догадки в том, что это как-то связано с щелчком списка Onsen.

Вот весь мой код страницы в любом случае:

<Ons.Splitter> 
       <Ons.SplitterSide 
        style={{ 
         boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)' 
        }} 
        side='left' 
        width={300} 
        collapse={true} 
        isSwipeable={true} 
        isOpen={this.state.menuOpen}//will open once you click the menu button 
        onClose={this.closeMenu} 
        onOpen={this.openMenu} 
       > 
        {/*Sidebar Content*/} 
        <Ons.Page renderToolbar={this.renderSidebar}> 
             {/*start of list*/} 
             <ons-list> 
              <ons-list-item onclick="fn.load('home.html')" tappable>Home</ons-list-item> 
              <ons-list-item onclick={this.toBonusSummary} tappable>Bonus Summary</ons-list-item> 
              <ons-list-item onclick="fn.load('about.html')" tappable>Sign Up</ons-list-item> 
              <ons-list-item onclick="fn.load('about.html')" tappable>Upgrade Package</ons-list-item> 
              <ons-list-item onclick="fn.load('about.html')" tappable>Group</ons-list-item> 
              <ons-list-item onclick="fn.load('about.html')" tappable>Finance</ons-list-item> 
              <ons-list-item onclick="fn.load('about.html')" tappable>Buy/Sell Credit</ons-list-item> 
              <ons-list-item onclick="fn.load('about.html')" tappable>Promo Pin Buy/Sell</ons-list-item> 
              <ons-list-item onclick="fn.load('about.html')" tappable>Information Centre</ons-list-item> 
              <ons-list-item onclick="fn.load('about.html')" tappable>iChat</ons-list-item> 
              <ons-list-item onclick="fn.load('about.html')" tappable>Settings</ons-list-item> 
              <ons-list-item onclick="fn.load('about.html')" tappable>Log Out</ons-list-item> 
              </ons-list> 
             {/*end of list*/} 
        </Ons.Page> 
        {/*End of Sidebar Content*/} 
       </Ons.SplitterSide> 

       {/*Page Content*/} 
       <Ons.SplitterContent> 
        <Ons.Page renderToolbar={this.renderToolbar}> 
        <PageContent data-pageName={this.state.pageClicked} onChange={this.closeMenu} name={this.state.username} data-defaultOption={'a'} value={'a'} data-error={'a'} data-options={[]}/> 
        </Ons.Page> 
       </Ons.SplitterContent> 
      {/*End of Page Content*/} 
       </Ons.Splitter> 

Еще в развитии & в основном много копий вставленного кода.

Любое объяснение, почему нажатие ons-list-item не будет работать в моем случае?

PS: Эти другие ссылки onclick не работают & на самом деле является избыточным.

+1

Не знаю много о бремени, но я думаю, что onclick должен быть с верхним регистром C - onClick – Majky

+0

@ Майки да, он исправил ошибку. Если бы вы могли добавить это как ответ, я приму его, когда проснусь позже. Большое спасибо! –

ответ

2

Реакция чувствительна к регистру, и в этом случае onclick должен быть с верхним регистром C - onClick.