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

作者: 别烦我
发布时间: 2024-11-04 01:32:16 (13小时前)
转自：

4 条回复

0#
回复此人
谦成 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在SharePoint中使用模式对话框时遇到了同样的问题。 </p> <P> React似乎需要完整的事件冒泡，而父元素有一个点击处理程序，其中有一个“stopPropagation”调用，导致在对话框中没有处理的点击事件。 </p> <P> 对于黑客你可以添加 <code> SP.UI.Dialog.$z = function () {}; </code> 在某处抑制那些处理程序附件，但更明确的方法是自己重新实现模态对话框。 </p> </DIV>

编辑
1#
回复此人
别烦我 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我做了一些编辑，但不是太多。刚刚在脚本标记的末尾添加了React.render并进行了回调以更改文本。你在运行哪个版本的React？ </p> <pre> <code> <!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> </code> </pre> <P> 当为事件触发调用函数回调时，我还连接了切换文本的更新 </p> <P> 工作的例子在这里 <a href="http://jsbin.com/yoseqo/edit?html,output" rel="nofollow"> http://jsbin.com/yoseqo/edit?html,output </A> </p> </DIV>

编辑
2#
回复此人
青年@ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 有 <code> <button onClick={this.fireEvent()}> </code> 将在呈现组件时调用fireEvent，并将该事件的返回（无）绑定到onClick函数。 </p> <P> 你可能想尝试一下 </p> <pre> <code> <button onClick={this.fireEvent.bind(this)}> </code> </pre> <P> 要么 </p> <pre> <code> <button onClick={() => {this.fireEvent()}}> </code> </pre> </DIV>

编辑

登录后才能参与评论