使用 Onsen List 时，onClick 在 React 中不起作用？

Question

这是我的代码行有问题：

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

Answer 1

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

使用 Onsen List 时，onClick 在 React 中不起作用？

onClick not working in React when using Onsen List?

onclick

reactjs

onsen-ui