反应：这在事件处理程序中为空答案

【问题标题】：React: this is null in event handler反应：这在事件处理程序中为空
【发布时间】：2015-11-10 13:46:09
【问题描述】：

我有一个 LoginForm 组件。我想在提交之前检查 loginName 和 password 是否已设置。我试过这段代码（省略了很多东西）：

class LoginForm extends Component {

  constructor() {
    super();

    this.state = {
      error: "",

      loginName: "",
      password: "",
      remember: true
    };
  }


  submit(e) {
    e.preventDefault();
    if(!this.state.loginName || !this.state.password) { //this is null
      this.setState({ error: "Fill in both fields" });
    } else {
      console.log("submitting form");
    }
  }

  render() {
    return (
      <div className="col-xs-12 col-sm-6 col-md-4">
        <form className="login" onSubmit={this.submit}>
          <button type="submit" className="btn btn-default">Sign in</button>
        </form>
      </div>
    );
  }
}

export default LoginForm;

但是，我在事件处理程序中得到一个TypeError，说this 为空。

我该怎么办？

【问题讨论】：

标签： javascript reactjs this

【解决方案1】：

你需要为submit方法设置this，因为现在this是undefined，对于这个操作你可以使用.bind

onSubmit={ this.submit.bind(this) }

Example

或者你可以使用arrow function

onSubmit={ (e) => this.submit(e) }

Example

【讨论】：

我已经按照你的建议重写了 onSubmit 并且它正在工作，谢谢。

【解决方案2】：

React 之前为你绑定了回调到 this。但是现在它已经消失了，你必须自己绑定它或者像这样做包装器

onSubmit={() => this.submit()}

【讨论】：

【解决方案3】：

您尚未将this 绑定到您的班级；您可以使用 ES6 类属性功能以最简洁的方式解决问题；所以你需要做的就是：

   submit = (e) => {
      // some code here
   }

箭头函数会自动绑定它；比在构造函数中绑定要好得多；最重要的是永远不要这样做：

onSubmit={() => this.submit()}

这将创建一个函数，它是 javascript 中的一个对象，它会占用一些内存，现在驻留在您的 redner 函数中！这使得它如此昂贵。 render 函数是运行这么多次的代码的一部分，每次你的 submit 函数也被创建，你最终会遇到一些与性能相关的问题。所以你的代码应该是这样的：

class LoginForm extends Component {
  submit = (e) => {
    // some code here
  }

  render() {
    return (
        <form className="login" onSubmit={ this.submit }>
          <button type="submit" className="btn btn-default">Sign in</button>
        </form>
      );
    }
}

export default LoginForm;

在这里您不会遇到性能问题，也不会遇到绑定问题，并且您的代码看起来更好。

【讨论】：

【解决方案4】：

使用 Babel 的可以使用 bind operator 和 transform-function-bind 插件：

onSubmit={::this.submit}

这是一个语法糖：

onSubmit={this.submit.bind(this)}

【讨论】：