Вот моя строка кода, которая имеет проблемы: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 не работают & на самом деле является избыточным.
Не знаю много о бремени, но я думаю, что onclick должен быть с верхним регистром C - onClick – Majky
@ Майки да, он исправил ошибку. Если бы вы могли добавить это как ответ, я приму его, когда проснусь позже. Большое спасибо! –