使用温泉列表时，onClick在React中不起作用？

问题描述：

这里是我的代码行，有一个问题：使用温泉列表时，onClick在React中不起作用？

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

基本上toBonusSummary简单地改变组件本身，这是为了使新的内容点击列表时的状态。

我现在的问题是我收到一个意外的令牌(错误。我已经尝试将onclick更改为其他函数，并且它们不仅仅用于该行代码。

我的猜测是它与单击一个温泉列表有关。

这里是我的页面整个代码反正：

<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链接不起作用&实际上是多余的。

不太了解ons，但我认为onclick应该用大写字母C - onClick – Majky

@Majky是的，它修复了错误。如果你可以加上这个答案，我会在稍后醒来时接受它。非常感谢！ –

答

React区分大小写，在这种情况下，onclick应该用大写字母C - onClick。

使用温泉列表时，onClick在React中不起作用？

相关推荐