首页 文章

反应事件未在React组件中触发

提问于
浏览 次
0

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

3 回答

  • 0

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

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

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

    回复于
  • 1

    我做了一些编辑，但不是太多 . 刚刚在脚本标记的末尾添加了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

    回复于
  • 0

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

    你可能想尝试一下

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

    要么

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

相关问题