私が取り組んでいるアプリケーションの要件のために、react コンポーネントで react-dnd を正常に使用しています。
このコンポーネントには、単純なモーダル ウィンドウを表示するボタンもあります。
<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>
ご覧のとおり、このモーダルには、ネイティブの HTML ドラッグ アンド ドロップ イベントをリッスンする div 要素が含まれています。私の問題は、どうやらこれらのネイティブ イベントが何らかの形で react-dnd に上書きされ、役に立たなくなっていることです。
コンポーネントからすべての react-dnd ドロップ ターゲットを削除してテストしたところ、予想どおり、ネイティブ イベントが機能するようになりました。どうすれば期待どおりの動作を実現できますか?