Question

这是我的反应代码。我看了几个调用函数的例子，我没有运气。我有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;

Answer 1

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

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

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

Answer 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

Answer 3

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

您可能想尝试

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

或

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

React组件

3 个答案: