在 React 组件中未触发 React 事件答案

【问题标题】：React event not firing in React Component在 React 组件中未触发 React 事件
【发布时间】：2015-04-29 23:46:07
【问题描述】：

这是我的反应代码。我看到了几个调用函数的例子，但我没有运气。我有我的app.js 文件夹将NavigationDiv 渲染为HTML 在一个单独的文件夹中，一切都显示甚至按钮但是当我点击它时没有任何反应。

这是与我的密切相关的帖子：React events not firing 但我的仍然没有触发。如果我输入{this.fireEvent()}，我可以让它触发一次，但不能再次触发。提前谢谢！

var React = require('react');

var NavigationDiv = React.createClass({
  getInitialState: function()
  {
    return {liked: false};
  },

  handleClick: function(event)
  {
    this.setState({
      liked: !this.state.liked
    });
  },

  fireEvent:function()
  {
    console.log("am i being clicked" );
  },

  render: function()
  {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <button onClick={this.fireEvent}>
        You Click to toggle. {text}
      </button>
    );
  }
});

module.exports = NavigationDiv;

【问题讨论】：

你为什么不做<button onClick={this.handleClick}>？它应该以这种方式工作。
@Cristik 那行不通。
现在为我工作 -> jsfiddle.net/adeneo/69z2wepo/7391（并且..我从返回语句中删除了括号）
我仍然无法得到任何东西。如果这是我的反应设置，我不会对工作做出任何反应吗？
我不知道，我只是让它在 Fiddle 中工作？

标签： javascript reactjs

【解决方案1】：

我在 SharePoint 中使用模式对话框时遇到了同样的问题。

React 似乎需要完整的事件冒泡，而父元素有一个带有“stopPropagation”调用的点击处理程序，导致对话框中没有点击事件处理。

对于 hack，您可以在某处添加 SP.UI.Dialog.$z = function () {}; 以抑制这些处理程序附件，但更清晰的方法是自行重新实现模态对话框。

【讨论】：

【解决方案2】：

我做了一些修改，但不是太多。只需在脚本标签末尾添加 React.render 并进行回调以更改文本。你运行的是哪个版本的 React？

<!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-with-addons-0.13.1.js"></script>
  <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <div id="test"></div>
  <script type="text/jsx">

    var NavigationDiv = React.createClass({
    getInitialState: function () {
        return {
            liked: false
        };
    },

    handleClick: function (event) {
        this.setState({
            liked: !this.state.liked
        });
    },

    fireEvent: function () {
        alert("am i being clicked");
        this.handleClick();
    },

    render: function () {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
        return ( 

     <button onClick = {this.fireEvent} > You Click to toggle. {text} </button>

    );
  }
});

React.render(<NavigationDiv /> , document.body);


  </script>
</body>
</html>

当触发事件调用函数回调时，我还连接了切换文本的更新

工作示例在这里 http://jsbin.com/yoseqo/edit?html,output

【讨论】：

【解决方案3】：

拥有<button onClick={this.fireEvent()}> 将在组件渲染时调用fireEvent，并将该事件的返回（无）绑定到onClick 函数。

你可以试试

<button onClick={this.fireEvent.bind(this)}>

或

<button onClick={() => {this.fireEvent()}}>

【讨论】：