react 中this指向问题

运行一下代码会报错，就是因为this指向的问题

import React, {Component} from 'react'
import { Button } from 'antd';

export default class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      msg: 'first msg'
    }
  }
  handleSetdata() {
    // 这里的this是属于这个方法，不属于外部，所以无法调用到setState方法
    this.setState({
      msg: 'new data'
    })
  }
  render() {
    return (
      <div>
        <p>{this.state.msg}</p>
        <Button type="primary" onClick={this.handleSetdata}>Primary</Button>
      </div>
    )
  }
}

绑定事件处理函数this的几种方法：

1、在事件调用后面加上bind(this)

<Button type="primary" onClick={this.handleSetdata.bind(this)}>Primary</Button>

2、在构造函数中改变 

constructor(props) {
    super(props)
    this.state = {
      msg: 'first msg'
    }
    this.handleSetdata = this.handleSetdata.bind(this)
}

3、调用的方法，用es6箭头函数的形式声明，就不会存在this指向问题

handleSetdata = () => {
    this.setState({
      msg: 'new data'
    })
  }

 

react 事件调用方法传参问题

以下代码会报错：

handleSetdata不能直接使用传递参数

import React, {Component} from 'react'
import { Button } from 'antd';

export default class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      msg: 'first msg'
    }
  }

  handleSetdata = (val) => {
    this.setState({
      msg: val
    })
  }
  render() {
    return (
      <div>
        <p>{this.state.msg}</p>
        <Button type="primary" onClick={this.handleSetdata('nea msg')}>Primary</Button>
      </div>
    )
  }
}

正确写法

<Button type="primary" onClick={this.handleSetdata.bind(this, 'nea msg')}>Primary</Button>