javascript - react 子组件不响应点击事件

标签 javascript html reactjs

<分区>

我遇到了一个问题,组件没有在 button click 上触发 click 事件。

代码页面

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

玩家表

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 上的按钮时,没有任何反应。它应该有一个警告框。

谢谢!

最佳答案

它在您的情况下不起作用的原因应该是函数引用。

分配点击事件的最佳方法是在 createClass 方法中进行。

JS

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

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

我个人会避免在内联 HTML 中包含函数定义。

关于javascript - react 子组件不响应点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34141554/

相关文章:

css - 怎样才能让字行靠得更近一点,我的边界也没有一路穿过

javascript - 为什么一旦我们将相同的函数添加到其原型(prototype)中,作为对象属性的函数就无法访问?

javascript - 面向对象的 Javascript - 如何在类中定义类?来自 C# 示例

jquery - 使用jquery将外部html文件加载到div

javascript - React 无状态示例

javascript - 以文件作为参数的 React Api 调用

javascript - 如何在reactJS组件文件中编写和调用函数

javascript - Google Maps API v3 中缺少方法。我如何模拟 latRadians() 和 lngRadians()?

c# - 将javascript渲染的svg图像作为.png文件保存到本地磁盘

html - 垂直折叠三个div angularjs