react:class组件

class FilterForm extends Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handReset = this.handReset.bind(this);
    this.onExportUserList = this.onExportUserList.bind(this);
  }
  state = {
    queryBtnLoading: false,
    showUserIdTextArea: false,
    currentMultiTarget: '',
    params: null,
  };
  componentDidMount() {
    this.handleSubmit();
  }
  
  handleSubmit(e) {
    e && e.preventDefault();
    
  }

  handReset() {
    this.props.form.resetFields();
  }
  onExportUserList = async () => {
    const { params } = this.state;
    delete params.id_text;

    try {
      await exportUserInfoList(params);

      message.success('导出成功');
    } catch (error) {
      message.error(`导出失败: ${error.message}`);
    }
  };
  render() {
    const { queryBtnLoading } = this.state;
    return (
      <div>
      </div>
    );
  }
}

1. 在constructor中使用this一定要调用surper(props)
2. class中定义的函数要绑定在实例上并修改this指向才能用作回调函数（比如onclick={this.handleClick}）但如果是在当前执行上下文，可以不用绑定，（componentDidMounted(){this.handleClick()})
   • 方法一： constructor(){ this.handleClick = this.handleClick.bind(this); }
   • 方法二：onClick = { this.handleClick.bind(this)}
   • 方法三：onclick = { () => { this.handleClick() }}
3. 当函数定义成箭头函数时，不用绑定this，因为此时这个函数不是在构造函数的prototype上，而是在这个对象实例上（比如上面的onExportUserList方法），因为这是public class fields写法，同直接写在constructor外面的state一样，是直接绑定在实例上的
4. class同级的函数相互调用，要加上this，因为根据作用链域，类不是一个作用域，在当前函数作用域上面就是全局作用域，找不到同级函数，所以一定要加this