类组件内部自定义函数如何正确访问props和state？

这是类组件里非常常见的坑——事件处理函数的this绑定丢了，导致你拿不到组件的props和state。咱们先拆解下问题：

当你把this.printData直接传给按钮的onClick时，这个函数会脱离组件实例的上下文执行，此时this不再指向你的ReadData组件实例，自然就会报错“Cannot read property 'props' of undefined”。而render方法能正常用this，是因为React在调用render时会自动把this绑定到组件实例上。

下面给你三种靠谱的解决办法，都是类组件的标准操作：

1. 在构造函数中手动绑定this #

这是最传统也最稳妥的方式，在组件初始化时就把printData的this绑定到组件实例：

class ReadData extends Component {
  constructor(props) {
    super(props);
    this.state = { data: "" };
    // 关键：绑定this到组件实例
    this.printData = this.printData.bind(this);
  }

  componentDidMount() {
    this.setState({ data: "Hello World" });
  }

  printData() {
    // 现在this能正确指向组件实例了
    console.log(this.props.data);
    console.log(this.state.data);
  }

  render() {
    return (
      <div>
        <p>{this.state.data}</p>
        <button onClick={this.printData}>Print</button>
      </div>
    );
  }
}

2. 使用箭头函数定义类方法 #

箭头函数会自动继承外层作用域的this（也就是组件实例），用类字段语法定义方法就能避免绑定问题：

class ReadData extends Component {
  constructor(props) {
    super(props);
    this.state = { data: "" };
  }

  componentDidMount() {
    this.setState({ data: "Hello World" });
  }

  // 用箭头函数定义方法，this自动绑定组件实例
  printData = () => {
    console.log(this.props.data);
    console.log(this.state.data);
  };

  render() {
    return (
      <div>
        <p>{this.state.data}</p>
        <button onClick={this.printData}>Print</button>
      </div>
    );
  }
}

这种写法更简洁，现在很多React项目都用这种方式。

3. 在onClick中用箭头函数包裹调用 #

如果不想修改方法定义，也可以在事件绑定的时候用箭头函数包裹，这样每次点击时都会创建一个指向组件实例的箭头函数，再调用printData：

class ReadData extends Component {
  constructor(props) {
    super(props);
    this.state = { data: "" };
  }

  componentDidMount() {
    this.setState({ data: "Hello World" });
  }

  printData() {
    console.log(this.props.data);
    console.log(this.state.data);
  }

  render() {
    return (
      <div>
        <p>{this.state.data}</p>
        {/* 用箭头函数包裹，确保this指向组件实例 */}
        <button onClick={() => this.printData()}>Print</button>
      </div>
    );
  }
}

注意：这种方式每次组件重渲染时都会创建一个新的箭头函数，在性能敏感的场景（比如列表项的点击事件）可能会有轻微影响，但大部分普通场景完全没问题。

内容的提问来源于stack exchange，提问作者Amit Pathak