Javascript React组件中未触发React事件_Javascript_Reactjs

Javascript React组件中未触发React事件

javascript reactjs

Javascript React组件中未触发React事件,javascript,reactjs,Javascript,Reactjs,这是我的代码。我看到了几个调用函数的例子，但我运气不好。我的app.js文件夹将NavigationDiv呈现到一个单独的文件夹中的HTML，所有内容都显示出来，即使是按钮，但当我单击它时，什么都没有发生这是一个靠近我的哨所：但我的仍然没有开火。如果我把{this.firevent（）}放进去，我可以让它一次开火，但不能再开火。提前谢谢你 var React = require('react'); var NavigationDiv = React.createClass({ getIn

这是我的代码。我看到了几个调用函数的例子，但我运气不好。我的

app.js

文件夹将

NavigationDiv

呈现到一个单独的文件夹中的HTML，所有内容都显示出来，即使是按钮，但当我单击它时，什么都没有发生

这是一个靠近我的哨所：但我的仍然没有开火。如果我把

{this.firevent（）}

放进去，我可以让它一次开火，但不能再开火。提前谢谢你

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;

var React=require（'React'）；
var NavigationDiv=React.createClass({
getInitialState:函数（）
{
返回{liked:false}；
},
handleClick:函数（事件）
{
这是我的国家({
喜欢：！this.state.liked
});
},
firevent:function（）
{
log（“我被点击了吗”）；
},
render:function（）
{
var text=this.state.liked？'like'：'have't liked'；
返回(
单击可切换。{text}
);
}
});
module.exports=NavigationDiv；

我做了几次编辑，但没有太多。只是在脚本标记的末尾添加了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>


JS-Bin
var NavigationDiv=React.createClass({
getInitialState:函数（）{
返回{
喜欢：错
};
},
handleClick:函数（事件）{
这是我的国家({
喜欢：！this.state.liked
});
},
fireEvent:函数（）{
警报（“我被点击了”）；
这个。handleClick（）；
},
渲染：函数（）{
var text=this.state.liked？'like'：'have't liked'；
报税表（
单击可切换。{text}
);
}
});
React.render（，document.body）；

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

工作示例如下当呈现组件时，have

将调用fireEvent，并将该事件的返回（nothing）绑定到onClick函数

你可能想试试

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

或

{this.firevent（）}}>

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

React似乎需要完整的事件冒泡，而父元素中有一个包含“stopPropagation”调用的click处理程序，因此在对话框中没有处理的click事件

对于hack，您可以添加

SP.UI.Dialog.$z=function（）{}

可以在某个地方抑制这些处理程序附件，但更清晰的方法是自己重新实现模式对话框。

为什么不执行

？应该是这样的。@Cristik不起作用。现在对我有效->（并且..我从返回语句中删除了括号）我仍然无法得到任何东西。。如果是我的反应装置，我会不会对工作没有反应？我不知道，我只是让它在小提琴中工作？

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