React组件onClick处理程序不工作
React component onClick handler not working
我有一个基本的弹出窗口(图像),当你点击按钮时会出现。当你在弹出窗口之外点击时,它应该关闭,但当你在里面点击时,应该保持打开状态并调用测试函数。其初始状态isPopupVisible设置为false。当你点击按钮时,我会将状态设置为true,从而呈现弹出窗口。
问题是当你点击图片时,测试函数没有被调用。我认为这是因为状态被设置为false,并且带有onClick函数的图像元素最初没有被渲染。有人知道怎么解决这个问题吗?
(写在ecmascript 6中)
getInitialState () {
return {isPopupVisible: false}
},
onClick () {
if(!this.state.isPopupVisible){
this.setState({isPopupVisible: true});
document.body.addEventListener('click', this.onClickBody)
}
},
onClickBody () {
this.setState({isPopupVisible: false});
document.body.removeEventListener('click', this.onClickBody)
},
test () {
console.log('the onClick from the image works!');
},
showPopup () {
if(this.state.isPopupVisible){
return <div>
<img src='img.png' onClick={this.test} />
</div>
}else{
return null;
}
},
render () {
return (
<span>
<button onClick={this.onClick}>
See Popup
</button>
{this.showPopup()}
</span>
);
}
这有点像黑客,但。。。
onClickBody () {
setTimeout(function(){
if (!this.clickedInBounds && this.isMounted()) {
this.setState({isPopupVisible: false});
document.body.removeEventListener('click', this.onClickBody)
}
this.clickedInBounds = false;
}.bind(this), 0);
},
test () {
console.log('the onClick from the image works!');
this.clickedInBounds = true;
},
setTimeout只是为了让它在test
有机会运行之后运行该代码。isMounted只是为了在点击主体和setTimeout之间卸载组件的可能性很小。
jsbin
您可以在呈现弹出窗口之前添加一个底层透明div,而不是在body
上添加click
侦听器,该弹出窗口将在单击时关闭。
例如,这就是在react bootstrap Modal组件中实现的方式:https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Modal.jsx#L73
您可以在此处查看演示:http://react-bootstrap.github.io/components.html#modals
您的onClickBody
处理程序在调用test
之前被调用,在触发合成事件之前更改状态并从虚拟DOM中删除映像。
可能有一种优雅的方法可以解决这个问题,但因为您混合了本机和React事件API,我猜您必须更改onClickBody
的签名,以将事件作为其第一个参数,然后用类似if (e.target.nodeName !== "IMG") {}
的东西包装方法的主体。
JSFiddle在这里展示了这一点:http://jsfiddle.net/reactjs/69z2wepo/
我知道这篇文章已经一年了,但我知道正确的答案。
你有很多参考危险。
onClick () {
var self = this;
if(!this.state.isPopupVisible){
self .setState({isPopupVisible: true});
document.body.addEventListener('click', self .onClickBody)
}
},
onClickBody () {
var self = this;
this.setState({isPopupVisible: false});
document.body.removeEventListener('click', self .onClickBody)
},
test () {
console.log('the onClick from the image works!');
},
showPopup () {
var self = this;
if(this.state.isPopupVisible){
return <div>
<img src='img.png' onClick={self.test} />
</div>
}else{
return null;
}
},
这肯定可以解决您的问题
- importScripts在web工作程序中返回未定义的
- 读取在具有IE的工作程序中生成的对象URL
- 使用web工作程序进行多个并发繁重计算
- Chrome没有加载最新版本的web工作程序脚本(运行缓存版本)
- web工作程序中不同的服务器请求行为
- Firebase推送通知-节点工作程序
- fetch事件处理程序中的fetch()未触发服务工作程序中的fetch事件
- Async.js队列工作程序未完成
- Web工作程序在处理大型数组时内存不足
- 附加组件生成器:使用端口的多个工作程序
- js web工作程序内存泄漏
- 在执行不区分大小写的排序以删除web工作程序中的重复项时,首选大写字母唯一
- Web工作程序在传递具有数组缓冲区的大型对象数组时会崩溃Chrome选项卡
- 从node.js派生出多个phantomjs工作程序是否理想
- 从web工作程序和主浏览器线程访问相同的websql数据库
- 没有web工作程序的Javascript后台处理
- 如何通过javascript工作程序显示循环进程状态
- 检测正在运行的javascript工作程序
- 正在检索web工作程序中所有变量的列表
- HTML5画布处理中Web工作程序内存不足