如何在reactjs中访问悬停状态？

Question

我有很多篮球队的副手.因此,当其中一个团队正在盘旋时,我想为每个团队展示不同的东西.此外,我正在使用Reactjs,所以如果我可以有一个变量,我可以传递给另一个很棒的组件.

Answer 1

React组件在其顶级界面中公开所有标准Javascript鼠标事件.当然,你仍然可以:hover在你的CSS中使用,这可能足以满足你的一些需求,但是对于由悬停触发的更高级的行为,你需要使用Javascript.因此,要管理悬停交互,您需要使用onMouseEnter和onMouseLeave.然后将它们附加到组件中的处理程序,如下所示:

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

然后,您将使用某些状态/道具组合将更改的状态或属性传递给您的子React组件.

Answer 2

ReactJs为鼠标事件定义以下合成事件:

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

正如您所看到的,没有悬停事件,因为浏览器本身并未定义悬停事件.

您将需要为onMouseEnter和onMouseLeave添加处理程序以用于悬停行为.

ReactJS文档 - 事件

Answer 3

为了获得悬停效果，你可以简单地尝试这个代码

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>
  );
}

上面的两个代码都适用于悬停效果，但第一个过程更容易编写和理解