如果渲染用DragSource
包装的组件,则本机输入的行为将中断,并且无法将文本拖放到输入或文本区域中。如果要卸载DragSource
,那么本地删除将按预期工作。
请参见repl.it上的demo
屏幕截图
重现问题的简单方法
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import HTML5Backend from 'react-dnd-html5-backend';
import { DragDropContext } from 'react-dnd';
import { DragSource } from 'react-dnd';
const TextComponent = ({ connectDragSource }) => {
return connectDragSource(
<p>DragSource component</p>
);
}
const source = {
beginDrag(props) {
return { value: 'Some value' };
}
};
const collect = (connect) => ({
connectDragSource: connect.dragSource()
});
const DnDComponent = DragSource('TEXT', source, collect)(TextComponent);
class App extends Component {
render() {
return (
<div>
<div className="react-dnd-component"><DnDComponent /></div>
<div className="text-to-drop">Select and drop it</div>
<div className="textareat-to-drop"><textarea /></div>
<div className="input-to-drop"><input /></div>
</div>
);
}
}
const AppContainer = DragDropContext(HTML5Backend)(App);
ReactDOM.render(<AppContainer />, document.getElementById('root'));
我使用的包裹
"react": "^16.8.2",
"react-dnd": "^7.4.5",
"react-dnd-html5-backend": "^7.4.4",
"react-dom": "^16.8.2",
"react-scripts": "2.1.5"
很显然,react-dnd
捕获了事件,并以某种方式破坏了默认的事件传播。您能否建议实现默认行为?