React类组件问题：handleClick仅生效一次后报错_this.props.handleClick非函数

这个问题的核心原因很可能是Child1组件中handleClick方法的this绑定出了问题，导致第二次点击时this.props变成了undefined，进而报错_this.props.handleClick不是函数。

你在Child1里用了类字段箭头函数的写法：

handleClick = () => {
  console.log(this.props);
  this.props.handleClick();
};

这种写法依赖ES的类属性提案，需要你的项目配置了对应的Babel插件（比如@babel/plugin-proposal-class-properties）才能正常工作。如果没有配置，这个箭头函数的this并不会正确绑定到Child1的组件实例上，第一次点击可能因为某些巧合能正常执行，但状态更新后第二次点击就会出现this.props丢失的问题。

下面给出几种可行的解决方案：

方案1：在构造函数中手动绑定this #

这是React中最传统也最可靠的绑定方式，不需要依赖额外的Babel配置：

class Child1 extends Component {
  constructor(props) {
    super(props);
    // 手动绑定this到组件实例
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log(this.props);
    this.props.handleClick();
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click</button>
      </div>
    );
  }
}

方案2：在render的onClick中直接使用箭头函数 #

这种方式不需要在Child1中单独定义handleClick方法，直接在事件回调里调用props传过来的方法，箭头函数会自动捕获当前组件的this：

class Child1 extends Component {
  render() {
    return (
      <div>
        <button onClick={() => this.props.handleClick()}>Click</button>
      </div>
    );
  }
}

注意：这种方式每次render都会创建一个新的箭头函数，性能敏感场景下可能需要谨慎使用，但大部分普通场景完全没问题。

方案3：配置Babel支持类属性提案 #

如果你想保留原来的类字段箭头函数写法，需要在项目中安装并配置对应的Babel插件：

1. 安装插件：

npm install @babel/plugin-proposal-class-properties --save-dev

2. 在Babel配置文件（比如.babelrc或babel.config.js）中添加该插件：

{
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

这样你的原代码就能正常工作了。

另外，检查一下Parent组件的写法，你用箭头函数定义handleClick的方式是正确的，它已经自动绑定了Parent组件的this，这部分不需要修改。

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