I'm successfully using react-dnd in a react component for a requirement of the application I'm working on.
Said component also has a button that show a simple modal window:
<Modal show={this.props.show} onHide={this.props.onHide} id={'image-modal'} {...this.props} animation={true}>
...
<Modal.Body>
<div id="drop-target" onDragOver={this.handleDrag} onDrop={this.handleDrop}>
<div className="text-center"><p>Put your image here</p></div>
</div>
</Modal.Body>
...
</Modal>
As you can see, this modal contains a div element that is listening for native html drag and drop events. My problem is that apparently these native events are somehow being overwritten for react-dnd, rendering them useless.
I tested by eliminating all reeact-dnd drop target from the component and as I expected, the native events are now working. How can I achieve the behavior I'm expecting?
来源:https://stackoverflow.com/questions/33747346/how-to-avoid-native-ondrop-event-from-being-overwritten-for-react-dnd