Question

我有以下代码

import React, { Component } from "react";
import { Accounts } from "meteor/accounts-base";

export default class RegisterForm extends Component {
  registerUser(e) {
    e.preventDefault();
    Accounts.createUser(
      {
        email: this.email.value,
        password: this.password.value
      },
      error => {
        console.log(error);
      }
    );
  };

  render() {
    return (
      <form onSubmit={this.registerUser}>
        <input type="email" ref={input => (this.email = input)} />
        <input type="password" ref={input => (this.password = input)} />
        <button type="submit">Register User</button>
      </form>
    );
  }
}

不知何故，函数registerUser出现以下错误

未捕获的TypeError无法读取未定义的属性值

触发表单时

但是如果我将其更改为：

  registerUser = e => {}

似乎可行。为什么呢感谢您的回答。

Answer 1

因为后一种语法创建了一个箭头函数，该箭头函数通常像箭头函数那样绑定this。

以前的语法只是在类中创建一个“裸”函数。

class X {
  f() {
    console.log(this);
  }
  g = () => {
    console.log(this); 
  }
}

大致转换为

var X = (function() {
  function X() {
    var _this = this;

    this.g = function() {
      console.log(_this);
    };
  }

  X.prototype.f = function f() {
    console.log(this);
  };

  return X;
})();

方法名称（arg）{}≠方法名称= arg => {}

1 个答案: