this指向问题

如果想让this代表当前组件，有如下几种处理办法：

• 使用箭头函数（里面有没this，就向外找），如果是普通函数，那么它里面的this，就是undefined

import React from "react";
import ReactDOM from "react-dom";
class Counter extends React.Component {
  state = { number: 0 };
  handleSubmit = event => {
    event.preventDefault();
    console.log(this);
  };
  render() {
    return (
      <form action="" onSubmit={this.handleSubmit}>
        用户名：
        <input type="text" />
        密码：
        <input type="text" />
        <input type="submit" />
      </form>
    );
  }
}
ReactDOM.render(<Counter />, window.app);

• 在调用方法时，手动绑定this,onSubmit={this.handleSubmit.bind(this)}

import React from "react";
import ReactDOM from "react-dom";
class Counter extends React.Component {
  state = { number: 0 };
  handleSubmit(event) {
    event.preventDefault();   //阻止默认事件
    console.log(this);
  }
  render() {
    return (
      <form action="" onSubmit={this.handleSubmit.bind(this)}>
        用户名：
        <input type="text" />
        密码：
        <input type="text" />
        <input type="submit" />
      </form>
    );
  }
}
ReactDOM.render(<Counter />, window.app);

• 还可以使用匿名函数 onClick={()=>this.f1()}

import React from "react";
import ReactDOM from "react-dom";
class Counter extends React.Component {
  state = { number: 0 };
  handleSubmit(event) {
    event.preventDefault();
    console.log(this);
  }
  render() {
    return (
      <form action="" onSubmit={(event)=>{this.handleSubmit(event)}}>
        用户名：
        <input type="text" />
        密码：
        <input type="text" />
        <input type="submit" />
      </form>
    );
  }
}
ReactDOM.render(<Counter />, window.app);