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

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

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

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

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

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

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

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

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

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

私は受け入れられた答えが素晴らしいことを知っていますが、マップ上でハンドルを使用setTimeoutしmouseoverて保存できると感じているようなホバーを探している人にとっては（たとえば、リストIDをsetTimeoutハンドルに）します。上mouseoverのsetTimeoutからハンドルをクリアしてマップから削除

onMouseOver={() => this.onMouseOver(someId)}
onMouseOut={() => this.onMouseOut(someId)

次のようにマップを実装します。

onMouseOver(listId: string) {
  this.setState({
    ... // whatever
  });

  const handle = setTimeout(() => {
    scrollPreviewToComponentId(listId);
  }, 1000); // Replace 1000ms with any time you feel is good enough for your hover action
  this.hoverHandleMap[listId] = handle;
}

onMouseOut(listId: string) {
  this.setState({
    ... // whatever
  });

  const handle = this.hoverHandleMap[listId];
  clearTimeout(handle);
  delete this.hoverHandleMap[listId];
}

そして地図はこんな感じです

hoverHandleMap: { [listId: string]: NodeJS.Timeout } = {};

私は好むonMouseOverとonMouseOut、それはまた、すべての子供に適用されるためHTMLElement。これが必要ない場合はonMouseEnter、およびをonMouseLeaveそれぞれ使用できます。

ホバー効果がある場合は、このコードを試してください

import React from "react";
  import "./styles.css";

    export default function App() {

      function MouseOver(event) {
        event.target.style.background = 'red';
      }
      function MouseOut(event){
        event.target.style.background="";
      }
      return (
        <div className="App">
          <button onMouseOver={MouseOver} onMouseOut={MouseOut}>Hover over me!</button>
        </div>
      );
    }

または、useState（）フックを使用してこの状況を処理する場合は、次のコードを試すことができます

import React from "react";
import "./styles.css";


export default function App() {
   let [over,setOver]=React.useState(false);

   let buttonstyle={
    backgroundColor:''
  }

  if(over){
    buttonstyle.backgroundColor="green";
  }
  else{
    buttonstyle.backgroundColor='';
  }

  return (
    <div className="App">
      <button style={buttonstyle}
      onMouseOver={()=>setOver(true)} 
      onMouseOut={()=>setOver(false)}
      >Hover over me!</button>
    </div>
  );
}

上記のコードはどちらもホバー効果で機能しますが、最初の手順を記述して理解する方が簡単です