onClick funktioniert nicht in Reagieren, wenn Sie Onsen-Liste verwenden?

Question

Hier ist meine Codezeile, die ein Problem hat:

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

Grundsätzlich toBonusSummary einfach verändert den Zustand der Komponente selbst, die einen neuen Inhalt machen soll, wenn die Liste klicken.

Das Problem, das ich gerade habe, ist, dass ich einen unerwarteten Token von ( Fehler erhalte. Ich habe versucht, die onclick zu anderen Funktionen zu ändern, und sie arbeiten nicht nur in dieser Codezeile.

Meine Vermutungen sind, dass es etwas mit dem Klicken auf eine Onsen-Liste zu tun hat.

Hier ist meine ganze Code für die Seite trotzdem:

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

Noch in der Entwicklung & meist viel Kopie eingefügt Code.

Eine Erklärung, warum das Klicken auf ons-list-item in meinem Fall nicht funktioniert?

PS: Die anderen onclick Links funktioniert nicht & ist eigentlich überflüssig.

Answer 1

Bei der Reaktion wird die Groß-/Kleinschreibung beachtet, und in diesem Fall sollte onclick mit Großbuchstaben C - onClick sein.