react-dnd:添加DragSource会破坏本机输入的默认放置功能

时间:2019-05-21 14:24:14

标签: reactjs drag-and-drop react-dnd

如果渲染用DragSource包装的组件,则本机输入的行为将中断,并且无法将文本拖放到输入或文本区域中。如果要卸载DragSource,那么本地删除将按预期工作。

请参见repl.it上的demo

屏幕截图 react-dnd-issue

重现问题的简单方法

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捕获了事件,并以某种方式破坏了默认的事件传播。您能否建议实现默认行为?

0 个答案:

没有答案