Если я рендерил компонент, обернутый DragSource
, поведение собственного ввода нарушается, и я не могу перетащить текст в область ввода или текстовую область. Если размонтировать DragSource
, то нативный дроп работает как положено.
Пожалуйста, смотрите демо на repl.it
Скриншот
Простой способ воспроизвести проблему
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
ловит событие и каким-то образом нарушает распространение события по умолчанию. Не могли бы вы предложить для достижения поведения по умолчанию?