reactjs React组件无法使用removeEventListener()

yr9zkbsy 于 2022-11-29 发布在 React

关注(0)|答案(2)|浏览(173)

我尝试了所有我能想到的解决方法，但仍然无法删除EventListener。以下是我所有的思考方式，我想不出任何其他方法来解决它。希望有人能告诉我我该怎么做
1.直接删除

function doSomething(){}
const [testP, setTestP] = useState();
useEffect(() => { setTestP(document.querySelector("#test")); }, [testP]);

function App(){
return(
    <>
    <p id="test"></p>
    <button onClick={ testP.addEventListener("click",doSomething); }></button>
    <button onClick={ testP.removeEventListener("click",doSomething); }></button>
    < />
  );
}

1.使用一个useEffect（）挂钩

function doSomething(){}
const [testP, setTestP] = useState();
useEffect(() => { setTestP(document.querySelector("#test")); }, [testP]);

const [do, setDo]  = useState(false);  
useEffect(() => { 
  if(do === true) testP.addEventListener("click", doSomething); 
  else testP.removeEventListener("click", doSomething); 
}, [do]);

function App(){
return(
    <>
    <p id="test"></p>
    <button onClick={ setDo(true); }></button>
    <button onClick={ setDo(false); }></button>
    < />
  );
}

1.使用两个useEffect（）挂钩

function doSomething(){}
const [testP, setTestP] = useState();
useEffect(() => { setTestP(document.querySelector("#test")); }, [testP]);

const [enable, setEnable]  = useState(true);
const [disable, setDisable] = useState(true);  
useEffect(() => { testP.addEventListener("click", doSomething); }, [enable]);
useEffect(() => { testP.removeEventListener("click", doSomething); }, [disable]);

function App(){
return(
    <>
    <p id="test"></p>
    <button onClick={ setEnable(!enable); }></button>
    <button onClick={ setDisable(!disable); }></button>
    < />
  );
}

1.使用useState挂接

function doSomething(){}

const [foo, setFoo]  = useState();  

function App(){
return(
    <>
    <p id="test" onClick={foo}></p>
    <button onClick={ setFoo(doSomething); }></button>
    <button onClick={ setFoo(null); }></button>
    < />
  );
}

reactjs

来源：https://stackoverflow.com/questions/74587530/removeeventlistener-is-not-working-by-react-component

2条答案

按热度按时间

iqjalb3h1#

据我所知，您正在尝试通过单击按钮来添加和删除p上的事件侦听器。因此，如果您想这样做，那么您可以简单地使用useRef挂钩，不需要使用useState或useEffect。您可以使用useRef获取p的ref，并通过单击按钮简单地附加eventListener或分离事件侦听器。
CODESANDBOX LINK

import { useRef } from "react";

export default function Comp() {
  const pRef = useRef(null);

  function doSomething() {
    console.log("Loggin from doSomething");
  }

  function attachEventListener() {
    if (pRef.current) pRef.current.addEventListener("click", doSomething);
  }

  function detachEventListener() {
    if (pRef.current) pRef.current.removeEventListener("click", doSomething);
  }

  return (
    <>
      <p id="test" ref={pRef}>
        paragraph
      </p>
      <button onClick={attachEventListener}>addEventListener</button>
      <button onClick={detachEventListener}>removeEventListener</button>
    </>
  );
}

您必须将函数传递给onClick，而不是调用它。

<button onClick={ setFoo(doSomething); }></button>

因此，上面代码片段应该是

<button onClick={ () => setFoo(doSomething) }></button>

赞(0）回复(0）举报 2022-11-29

von4xj4u2#

我建议使用受控组件

function doSomething() {
  console.log('Do something')
}

export function App(props) {
  const [enabled, setEnabled] = React.useState(false)

  return (
    <div className='App'>
      <p onClick={enabled ? doSomething : null}>paragraph</p>
      <button onClick={() => setEnabled(true)}>Add event</button>
      <button onClick={() => setEnabled(false)}>Remove event</button>
    </div>
  );
}

赞(0）回复(0）举报 2022-11-29

我来回答

reactjs React组件无法使用removeEventListener()

2条答案

相关问题

热门标签

最新问答