web-dev-qa-db-ja.com

HTML5ドラッグアンドドロップの場合React

基本的なHTML5ドラッグアンドドロップ機能を実装するために、ReactJsで基本的なアプリケーションを作成しています。私が直面している問題は、私のonDragStartイベントがイベントオブジェクトをハンドラーメソッドに渡していないことです。 HTML5ドラッグアンドドロップのドキュメント を参照しました。ここでは、イベントオブジェクトがハンドラーに渡される方法を示しています。

これは、onDragStartイベントのイベントハンドラーを実装するための私のコードです。

//handler method
dragStartHandler(event) {
 console.log(event); // undefined
}

render() {
 return (
   <div draggable="true" 
    onDragStart={this.dragStartHandler(event)}></div>
 )
}

ハンドラーが呼び出されていますが、イベントオブジェクトはありません。私のアジェンダは、イベントオブジェクトをキャプチャして、 DataTransfer インターフェイスを使用してデータをイベントにバインドするためにさらに進むことができるようにすることです。

行動を理解するのを手伝ってください。

ありがとう！

更新

イベントをdragStartHandlerメソッドに渡さない場合、実際にはイベントはハンドラーメソッドに渡されます。 HTML5 DNDのドキュメントに記載されているものとは異なり、reactがメソッドをバインドするために機能するのは、reactでは機能しないようです。ハンドラーで取得したイベントは、HTML仕様に従って元のドラッグのラップアップバージョン イベント でした。この振る舞いは、いくつかの Proxy オブジェクトがreactによって作成される可能性があるため、私を混乱させました。

Solution：Proxyオブジェクトには元のDragイベントのすべてのメソッドがありますが、後で気づきました。したがって、以前のすべての動作で、ネイティブhtml要素として以前に使用したように新しいプロキシイベントオブジェクトを使用できます。

htmlreactjsdrag-and-drop
5
Prabodh M

交換

onDragStart={this.dragStartHandler(event)}

に

onDragStart={this.dragStartHandler}

関数をonDragStartプロパティに渡す必要があります（onClick、onMouseEnterなどの他のイベント関連プロパティと同様）。関数呼び出しの結果ではありません。 。 React.jsは、イベントオブジェクトを引数として「内部」のハンドラー関数に渡します。ただし、React.jsはネイティブJavaScriptイベントのラッパーを作成することを覚えておく必要があります。その名前は「SyntheticEvent」です。詳細については、 docs を参照してください。ただし、ハンドラー関数でネイティブイベントにアクセスできます（以下のコードを参照）。

var Draggable = React.createClass({
    handleDrag(event) {
    console.log('react SyntheticEvent ==> ', event);
    console.log('nativeEvent ==> ', event.nativeEvent); //<- gets native JS event
  },

  render: function() {
    return (<div draggable="true" onDragStart={this.handleDrag}>
                Open console and drag me!
            </div>);
  }
});

ReactDOM.render(
  <Draggable />,
  document.getElementById('container')
);

この例の動作を見てください--- https://jsfiddle.net/yrhvw0L0/2/

6
Mikhail Shabrikov