我可以在 React 应用程序中使用钩子操作事件侦听器吗？

Question

is it possible to enable/disable event listener based on useState hook ?

I created a Hook:

const [ifClicked, setIfClicked] = useState(true);

and a functions :

const handleIfClicked = () => {setIfClicked(!ifClicked)};

const extendTreatments = () =>{
dropdownFB ? setDropdownFB(false) : setDropdownFB(true);
  handleIfClicked();
}

I've got li element with event listeners and function above:

<li className="nav-item" 
    onMouseEnter={onMouseEnterFB}
    onMouseLeave={onMouseLeaveFB}
    onClick={extendTreatments}

I've tried to enable/disable event listeners by manipulating hook "ifClicked". The main goal is to once element got clicked don't use event listener "onMouseLeave" (turn it off).

<li className="nav-item" 
    onMouseEnter={onMouseEnterFB}
    ifClicked && onMouseLeave={onMouseLeaveFB}
    onClick={extendTreatments}
    >

Answer 1

Instead of adding/removing event listener, consider not running your function at all, if "ifClicked" is false.

<li className="nav-item" 
  onMouseEnter={onMouseEnterFB}
  onMouseLeave={ifClicked && onMouseLeaveFB}
  onClick={extendTreatments}
>