如何在React中将事件处理函数作为props传递？

嘿，我来帮你搞定这个组件间传递事件处理函数的问题！你的Talker.js其实已经迈出了正确的第一步，接下来只需要补全Button.js的代码，就能让整个逻辑跑通啦。

第一步：父组件传递函数props #

你在Talker.js里已经正确地把talk方法作为自定义props传递给了Button组件：

// Talker.js里的render方法
return <Button talk={this.talk} />;

这里的talk就是我们自定义的props名称，子组件Button可以通过this.props.talk拿到这个函数。

第二步：子组件接收并使用props #

接下来补全你的Button.js，把父组件传过来的函数绑定到按钮的点击事件上：

import React from 'react';

export class Button extends React.Component {
  render() {
    // 从props中取出talk函数，绑定到按钮的onClick事件
    return <button onClick={this.props.talk}>点击我说话！</button>;
  }
}

这样当用户点击按钮时，就会触发父组件Talker里的talk方法，弹出那串重复的"blah"啦。

额外注意：如果函数需要访问父组件的this #

如果你的talk方法里需要用到父组件的state或props，就得确保this的指向正确。有两种常用的处理方式：

• 方式1：在构造函数中绑定this

class Talker extends React.Component {
  constructor(props) {
    super(props);
    // 绑定this到talk方法，确保方法内的this指向组件实例
    this.talk = this.talk.bind(this);
  }

  talk() {
    // 这里可以正常访问this.state或this.props
    console.log('当前组件props:', this.props);
  }

  render() {
    return <Button talk={this.talk} />;
  }
}

• 方式2：使用箭头函数定义方法
  箭头函数会自动绑定当前组件实例的this，写法更简洁：

class Talker extends React.Component {
  // 用箭头函数定义talk方法，自动绑定this
  talk = () => {
    console.log('当前组件state:', this.state);
  }

  render() {
    return <Button talk={this.talk} />;
  }
}

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