React的onPaste必须点击一次元素才能起作用问题

最近在封装一个图片组件的过程中,有一个需求是需要能够复制粘贴上传图片, 因为React中有自带的合成事件onPaste绑定事件,但是出现一个问题是, 鼠标直接放在上面,并不能触发onPaste事件 .使用了各种方法都不行

  handlePaste = (e)=> {console.log(e)}...<div className="cropper" onPaste={this.handlePaste}></div>

各种方法都尝试过了,下面尝试过的方法:

手动focus()组件
手动click()组件
手动绑定事件ReactDOM.findDOMNode(this.refs.cropper).addEventListener('paste',(event)=> {this.handlePaste(event)})

这些方法都不行,必须要用户主动点击一下才行,这个我认为可能是浏览器的设定,非表单元素不能直接进行粘贴,也不能手动focus,必须用户选中元素,不能用代码来模拟点击和聚焦,但是在vue用是可以直接使用的,我猜测是vue中的指令是通过由body监听到事件再分发给绑定了指令的元素,只是猜测

//vue中自定义指令
Vue.directive('paste',{bind(el,binding,vnode) {el.addEventListener('paste',function(event){binding.value(event)})}
})

然后再react的github的issue里找到了一个相同的提问,有一种比较hack的方法,但是确实没有人给出有其他方法,大家都认为是浏览器行为.

里面的解决方法是,给div添加tabindex和contentEditable,将元素变成一个可以focus的元素,然后手动聚焦

var Hello = React.createClass({handlePaste: function(evt) {evt.preventDefault();console.log("handling paste");},render: function() {return <divstyle={{color: "transparent"}}tabIndex={0}contentEditable={true}ref={function(main) {if (main != null) {main.focus();} }}onPaste={this.handlePaste}><svg width={200} height={200}><rect width={50} height={50}/></svg>text</div>;}
});ReactDOM.render(<Hello name="World" />,document.getElementById('container')
);

这种方法是比较hack的写法,目前还不知道有什么其他方法.

React的onPaste必须点击一次元素才能起作用问题相关推荐

[react] 在React中如何判断点击元素属于哪一个组件？
[react] 在React中如何判断点击元素属于哪一个组件? 首先 import {findDOMNode} from 'react-dom' <div onClick={(e)=>{ ...
检测React组件外部的点击
本文翻译自:Detect click outside React component I'm looking for a way to detect if a click event happened ...
[react] react怎么拿到组件对应的DOM元素？
[react] react怎么拿到组件对应的DOM元素? 在Class组件中 import React from 'react'; class CComponent extends React.Com ...
[react] 你对immutable有了解吗？它有什么作用？
[react] 你对immutable有了解吗?它有什么作用? 让 react 的渲染符合预期,比如我们使用 ref 保留对象引用后,传递给子组件渲染,如果这是对象内的属性变更,不会触发子组件重新渲染 ...
[react] 组件卸载前，加在DOM元素的监听事件和定时器要不要手动清除？为什么？
[react] 组件卸载前,加在DOM元素的监听事件和定时器要不要手动清除?为什么? 定时器要在 componentWillUnmount 手动清除,直接绑定在JSX里的事件监听器不用,使用ref绑定 ...
从Preact了解一个类React的框架是怎么实现的(二): 元素diff
前言首先欢迎大家关注我的掘金账号和Github博客,也算是对我的一点鼓励,毕竟写东西没法获得变现,能坚持下去也是靠的是自己的热情和大家的鼓励. 之前分享过几篇关于React的文章: React技术内 ...
Adobe Edge Animate --点击元件内部元素使元件其他元素发生改变
Adobe Edge Animate --点击元件内部元素使元件其他元素发生改变版权声明: 本文版权属于北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 前面讲到的很多按钮操作都是 ...
软件项目技术点(4)——实现点击画布上元素
AxeSlide软件项目梳理 canvas绘图系列知识点整理元素和影子我们在主画布上绘制所有添加到画布上的元素,主画布上的所有元素存储在commonElements中. 在hitCanvas上 ...
一个元素位于另一个元素之上，点击上面的元素引发下面元素事件操作
一个元素位于另一个元素之上,点击上面的元素引发下面元素事件操作 <body><!-- 想要点击'上面盒子内 ...

React的onPaste必须点击一次元素才能起作用问题

React的onPaste必须点击一次元素才能起作用问题

React的onPaste必须点击一次元素才能起作用问题相关推荐

最新文章

热门文章