Javascript 是否可以在处理程序函数中删除并读取React eventListener？

我正在使用类似于fullpage.js的React，我需要在转换过程中删除eventListener

可能吗

反应码

function App() {
  const wheelHandler = (event) => {
     // I need to remove wheelHandler here

     setTimeout(() => {
       // I need to readd wheelHandler here
     }, 1000); // Assume that the transition ends after 1000ms
  };

  return (
    <div className="App" onWheel={wheelHandler} />
  );
}

---

另外，我在React上尝试了Vanilla JS解决方案，但事件处理程序在一个滚轮上被多次触发。因此，我别无选择，只能选择React的SyntheticEvent。

按照连接方式，如果不使用一段状态来告诉您是否连接处理程序并重新渲染，这可能是过火了

相反，我设置了一个标志（可能是通过ref在对象上），告诉处理程序在您希望忽略调用期间忽略调用

这句话很长：

function App() {
  const {current: scrolling} = useRef({flag: false});
  const wheelHandler = (event) => {
     // I need to remove wheelHandler here
     if (scrolling.flag) {
         // Bail out
         return;
     }
     scrolling.flag = true;

     // ...other logic if any...

     setTimeout(() => {
       // I need to readd wheelHandler here
       scrolling.flag = false;
     }, 1000); // Assume that the transition ends after 1000ms
  };

  return (
    <div className="App" onWheel={wheelHandler} />
  );
}

函数应用程序（）{
const{current:scrolling}=useRef（{flag:false}）；
常量wheelHandler=（事件）=>{
//我需要在这里拆下车轮处理器
如果（滚动.flag）{
//纾困
返回；
}
scrolling.flag=true；
//…其他逻辑，如果有的话。。。
设置超时（（）=>{
//我需要读一下wheelHandler
scrolling.flag=false；
}，1000）；//假设转换在1000毫秒后结束
};
返回(
);
}

或者您也可以这样做，您不需要额外的对象（我倾向于使用一个ref来保存所有非状态实例数据，但您不必）：

函数应用程序（）{
常量滚动=useRef（false）；
常量wheelHandler=（事件）=>{
//我需要在这里拆下车轮处理器
如果（滚动。当前）{
//纾困
返回；
}
scrolling.current=true；
//…其他逻辑，如果有的话。。。
设置超时（（）=>{
//我需要读一下wheelHandler
scrolling.current=false；
}，1000）；//假设转换在1000毫秒后结束
};
返回(
);
}

如中所述，REF对于非状态实例信息非常有用：

但是，

useRef（）

的作用不仅仅限于

ref

属性。它可以方便地保留任何可变值，类似于在类中使用实例字段的方式

---

谢谢。不过有几个问题，

scrolling

与普通变量有何不同？如果我像

useRef（false）

和

scrolling=false那样使用它，为什么它不起作用

？我的意思是

让{current:scrolling}=React.useRef（false）和
滚动=假@Max-问得好！这不起作用，因为React不知道你做过
useRef
为您提供一个带有
当前属性的ref对象，并且它总是返回相同的ref对象。您可以使用
current
属性执行任何操作。在我最初的示例中，我将
current
设置为具有
flag
属性的对象，然后更改该
flag
属性。由于React始终返回相同的ref对象，因此对属性的更改在调用之间保持不变。但是如果您只是将
current
属性转换为局部变量并更改局部变量，则不会更改
current
属性，只更改局部变量。但我的示例可以更简单，我添加了第二个版本。我最初是出于习惯这样写的，我倾向于使用一个ref（当我需要一个ref时）来保存所有非状态实例信息，因此我使用了一个具有属性的对象（
flag
）。但您也可以直接更改
current
的值。请参见第二个示例以了解。。。呃。。。一个例子谢谢你的解释很清楚。我现在明白了：）
function App() {
  const {current: scrolling} = useRef({flag: false});
  const wheelHandler = (event) => {
     // I need to remove wheelHandler here
     if (scrolling.flag) {
         // Bail out
         return;
     }
     scrolling.flag = true;

     // ...other logic if any...

     setTimeout(() => {
       // I need to readd wheelHandler here
       scrolling.flag = false;
     }, 1000); // Assume that the transition ends after 1000ms
  };

  return (
    <div className="App" onWheel={wheelHandler} />
  );
}

function App() {
  const scrolling = useRef(false);
  const wheelHandler = (event) => {
     // I need to remove wheelHandler here
     if (scrolling.current) {
         // Bail out
         return;
     }
     scrolling.current = true;

     // ...other logic if any...

     setTimeout(() => {
       // I need to readd wheelHandler here
       scrolling.current = false;
     }, 1000); // Assume that the transition ends after 1000ms
  };

  return (
    <div className="App" onWheel={wheelHandler} />
  );
}