Question

所以我基本上要做的就是简单

GNU Make 4.1
Built for x86_64-apple-darwin13.4.0

由于某种原因，它不起作用。在我的JavaScript控制台（铬）我得到了这个

class Something extends React.Component {

validateEmail () {
//code that validates email,innerHTML a div.status element if error occurs
this.removeStatus();//then remove status onkeydown of input element
 }

removeStatus () {
//code that removes the status onkeydown of input element

 }
}

编辑1：我已添加实际代码，因为您可以看到我在构造函数中绑定了validateEmail

login.js:132Uncaught TypeError: this.removeStatus is not a function

Answer 1

您的方法已正确定义，因此问题在于您调用 validateEmail的方式。

您正在以将this设置为Something实例之外的其他方式调用它。这在事件监听器中很常见。我想你的render：

中有一些这样的代码

<button onClick={this.validateEmail} />

React的recommended solution用于绑定构造函数中的事件处理程序：

class Something extends React.Component {

  constructor() {
    super();
    this.validateEmail = this.validateEmail.bind(this);
  }

  // ...
}

您也可以从箭头函数内部调用该方法，该函数在声明的位置保留this的值：

<button onClick={() => this.validateEmail()} />

这种方法的缺点是每次渲染组件时都会创建一个新的onClick处理程序。

编辑：同样的问题，不同的地方。您在removeStatus内拨打function，这会丢失外部this绑定。请改用箭头功能：

$.ajax({
  success: (response) => { 
    // etc
    this.removeStatus();
  }
})

进一步阅读：

Answer 2

我有一个类似的问题

我遇到了类似的问题，并出现了相同的错误消息。有点奇怪的是，有时当我在另一个方法中调用一个方法时，它可以工作。我正在制作一个西蒙游戏，并且方法中的以下方法有效。

handleMouseDown (e) {
    if(e.target.id==="green"){
    $("#green").addClass("colorGreenPush");
      greenSound.play();
      clicked.push(1);
      this.handleCheck();
    }

我只是在用户按下按钮时运行检查方法。没错。

但是我得到了一个带有此代码

的TypeError

 handleCheck () {
    var display = $("#display");
    if(litID.length == clicked.length){
      if(litID.join() == clicked.join()){
        if(round == 20){
          setTimeout(function(){
          alert("Unreal. You Acually Won!!!");
          location.reload();
          },1000);
        }
        else{
          setTimeout(function(){
            display.text("-"+(round + 1)+"-");
            round ++;
            console.log(this);
            litID = [];
            clicked = [];
            j = 0;
            this.handleGame();
          },1000);
        }
      }

接近结束时，我尝试this.handleGame();并且它无法正常工作。

我的解决方案

你会注意到我做了一个console.log(this);只是为了看看这是什么。原来这是Window对象。我不知道为什么，也许被埋在if / else语句中。这两种方法都是绑定的，因此不存在问题。

总之。我在窗口对象中四处寻找并证明我可以使用this.App.prototype.handleGame();并且它有效！我应该补充一点，我的主要ES6组件的名称是App。这将根据您的组件和方法名称而有所不同，但总体原则仍然适用。

我感到震惊

我承认我是个新手。这是我在React的第二个迷你项目，但发现这是最酷的事情。现在可能还有其他方法，比如上面提到的箭头功能，但这对我有用。这是游戏和直接垃圾之间的区别。希望这有助于某人。

如何在反应类Es6中的另一个方法中调用方法

2 个答案:

我有一个类似的问题

但是我得到了一个带有此代码

我的解决方案

我感到震惊