web-dev-qa-db-ja.com

reactjsでホバー状態にアクセスするにはどうすればよいですか？

私はたくさんのバスケットボールチームと一緒にサイドナブを持っています。そのため、チームの1人がホバリングされているときに、チームごとに異なるものを表示したいと思います。また、Reactjsを使用しているので、別のコンポーネントに渡すことができる変数がある場合は、それを使用することもできます。

hoverreactjs
80
Username

Reactコンポーネントは、トップレベルのインターフェースですべての標準Javascriptマウスイベントを公開します。もちろん、CSSで:hoverを使用することもできます。これは、一部のニーズには十分かもしれませんが、ホバーによってトリガーされるより高度な動作には、Javascriptを使用する必要があります。そのため、ホバー操作を管理するには、onMouseEnterとonMouseLeaveを使用します。次に、コンポーネントのハンドラーに次のように添付します。

<ReactComponent
    onMouseEnter={this.someHandler}
    onMouseLeave={this.someOtherHandler}
/>

次に、状態/プロパティの組み合わせを使用して、変更された状態またはプロパティを子Reactコンポーネントに渡します。

122
stolli

ReactJsは、マウスイベントに対して次の合成イベントを定義します。

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp

ご覧のとおり、ホバーイベントはありません。ブラウザーはホバーイベントをネイティブに定義していないためです。

ホバー動作のためにonMouseEnterおよびonMouseLeaveのハンドラーを追加する必要があります。

ReactJSドキュメント-イベント

22
BentOnCoding