Javascript 如何在没有匿名函数的情况下设置事件侦听器？（不失去范围）

我认为这是一个非常基本的问题，但我还没有发现如何独自解决这个问题。假设我有一个React文件，其中设置了一个侦听器：

ipcRenderer.on('receiveData', function() {
  console.log("Hello World");
});

我正在听一个由电子发出的事件。上面的例子很有效。无论何时触发receiveData事件，my anonymous函数都会记录Hello World。现在假设我在同一个React文件中有一个不同的函数，我不想再启动匿名函数了，但是我自己的函数。像这样：

myOwnFunction() {
  console.log("Hello World");
}

ipcRenderer.on('receiveData', myOwnFunction);

我试过这个，但不起作用。事情是这样的：

import React from 'react';
//...
class TextView extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
                    inputField: '',
                  };
  }

  onFormSubmit(e) {
  }
  handleInputChange(e) {
    this.setState({inputField: e.target.value})
  }


  myOwnFunction() {
    console.log("MY OWN");
  }

  onButtonClick(event) {
    ipcRenderer.send('sendInvite', 1);
    ipcRenderer.on('rightPressed', function(event, arg){ console.log("stuff"+arg); });  //line 34; this works
    ipcRenderer.on('rightPressed', myOwnFunction); //line 35, this does not work

  render() {
    return (
        <div>
        //....
        </div>
      );
  }
}

从“React”导入React；
//...
类TextView扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
输入字段：“”，
};
}
onFormSubmit（e）{
}
handleInputChange（e）{
this.setState（{inputField:e.target.value}）
}
myOwnFunction（）{
console.log（“我自己的”）；
}
onButtonClick（事件）{
发送（'sendInvite'，1）；
ipcRenderer.on（'rightPressed'，function（event，arg）{console.log（“stuff”+arg）；}）；//第34行；这很有效
ipcRenderer.on（'rightPressed'，myOwnFunction）；//第35行，这不起作用
render（）{
返回(
//....
);
}
}

当事件发出时，我现在得到错误：

未捕获引用错误：未定义myOwnFunction 在onButtonClick(file:///Users/user/Coding/electron-noprebuilt/public/js/bundle.js:1286:38) 在Object.ReactErrorUtils.invokeGuardedCallback(file:///Users/user/Coding/electron-noprebuilt/public/js/bundle.js:15663:16) 在执行调度时(file:///Users/user/Coding/electron-noprebuilt/public/js/bundle.js:8657:21) 在Object.executeDispatchesInoder(file:///Users/user/Coding/electron-noprebuilt/public/js/bundle.js:8680:5) 在已执行的分派和删除时(file:///Users/user/Coding/electron-noprebuilt/public/js/bundle.js:8114:22) 在已执行的DispatchesAndReleaseToplevel(file:///Users/user/Coding/electron-noprebuilt/public/js/bundle.js:8125:10) at Array.forEach（本机） 一开始(file:///Users/user/Coding/electron-noprebuilt/public/js/bundle.js:22170:9) 在Object.processEventQueue上(file:///Users/user/Coding/electron-noprebuilt/public/js/bundle.js:8330:7) 在runEventQueueInBatch时(file:///Users/user/Coding/electron-noprebuilt/public/js/bundle.js:15690:18)

---

使用

箭头函数

它将绑定

上下文

。要调用同一

类中存在的任何
函数
，我们需要使用
this
关键字。如下所示：

this.myOwnFunction（）//它将调用'myOwnFunction'函数

使用
箭头函数
这样写：

ipcRenderer.on('receiveData', () => {    //use arrow function
     this.myOwnFunction()
});

注意：上述代码可以工作，但请确保您
bind
方法
on按钮单击
ipcrederer.on（'receiveData'，myown函数）；“我似乎失去了作用域”-您的函数对当前范围内的任何内容都不做任何处理。您需要提供一个实例来说明问题。@geogenewer-您的代码是否在React类中？也许您应该提供一个实例，而不是文件中间的一段代码。^^^那就是。您发布的是Javascript。您的问题还远远没有完成因此，我们无法帮助您。ipcRenderer.on（'rightPressed'，myOwnFunction}）；在这行中，为什么箭头函数建议会被否决？我很想知道为什么这个解决方案不是一个好的解决方案？我也想知道为什么否决：）顺便说一句，这应该是可行的。我假设有人否决了你（和其他人），因为你不理解OP的问题。Arrow函数或bind不是一个解决方案，或者更确切地说是一个不同问题的解决方案，而不是OP所拥有的。@MayankShukla这实际上对我有用！非常感谢你！我猜我的第一个错误是错误的错误，而错误实际上是范围。令人惊讶的是你没有删除这个。