Реакция дочернего компонента не отвечает на событие click

Question

У меня возникла проблема с тем, что компонент не активировал событие щелчка при нажатии кнопки.

Вот код

TickerPage

render() { 
    return (
    <div className="TickerPage"> 
     <div className="TickerPage-container"> 
     <br /> 

     <div className='leftContainer'> 
      <PlayersTable players={this.state.players} /> 
     </div> 

     <div className='rightContainer'> 
      <PlayerDetail playerid={this.state.playerid} /> 
     </div> 

     <div className='bottomTicker'> 
      <Ticker /> 
     </div> 
     </div> 
    </div> 
); 

PlayersTable:

render() { 
    let tbl = this.buildTable(); 

    return (
    <div className="PlayersTable"> 
     <div className="PlayersTable-container"> 

     <button onclick='alert("test")'>test</button> 

     <h1 className='heading'>Players</h1> 
     {tbl} 
     <br /> 
     </div> 
    </div> 
); 
} 

Когда я нажимаю кнопку на PlayersTable, ничего не происходит. Он должен иметь окно предупреждения.

Спасибо!

Answer 1

Причина, по которой это не работает в вашем случае, ожидается, что это будет ссылка на функцию.

Лучший способ назначить событие click - сделать это в методе createClass.

JS

<button onClick={this.handleClick}>test</button> 

    handleClick: function(event) { 
     alert("test") 
    }, 

Я бы лично избежать, включая определение функции в инлайн HTML.

Answer 2

вопрос, я имел OnClick и не OnClick

Спасибо!