4

私が取り組んでいるアプリケーションの要件のために、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 ドロップ ターゲットを削除してテストしたところ、予想どおり、ネイティブ イベントが機能するようになりました。どうすれば期待どおりの動作を実現できますか?

4

0 に答える 0