Question

我有一个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为空。

我该怎么办？

Answer 1

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

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

Example

或者您可以使用arrow function

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

Example

Answer 2

React之前为你绑定了回调。但是现在它已经消失了，你必须自己绑定它或者像

那样制作包装器

HomeController.$inject['$scope', 'HomeService', 'DTOptionsBuilder', 'DTColumnBuilder', 'DTColumnDefBuilder'];

Answer 3

对于使用Babel的用户，可以将bind operator与transform-function-bind插件一起使用：

onSubmit={::this.submit}

这是一个语法糖：

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

Answer 4

您尚未将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;

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

React：在事件处理程序中为null

4 个答案: