React 向组件传递buttonProps时onClick传入类方法不生效问题

首先可以确认，从CardAvReport到ButtonLink再到底层DOM的事件传递链路是完全正常的——毕竟最开始传() => console.log("hi")的时候，点击按钮可以正常触发打印，说明组件prop传递、事件绑定的逻辑都没有问题。
核心问题出在你修改后的onClick写法上：

• 能正常运行的onClick结构：onClick: () => console.log("hi")
  这个箭头函数的函数体是直接执行打印逻辑，点击触发时，React调用这个箭头函数，内部的console.log就会执行。
• 失效的onClick结构：onClick: () => this.myFunction
  这个箭头函数的函数体是返回this.myFunction的函数引用，但从来没有在内部调用这个方法。相当于点击按钮时，React确实触发了这个匿名箭头函数，但函数执行完什么实际操作都没做，只是把你的类方法当返回值抛出去，myFunction自然永远不会被触发。
  这个是非常典型的写法混淆：把“返回函数引用”和“执行函数”搞混了，相当于给onClick传了一个空跑的函数，自然不会有预期的逻辑执行。

针对这个问题，只需要修正onClick的写法即可，根据你的使用场景选对应的方式：

1. 需要在点击时传自定义参数给类方法的场景
   保留外层箭头函数的结构，显式加上方法的调用括号：

   <CardAvReport
     buttonProps={buttonProps ? {
       ...buttonProps,
       small: true,
       onClick: () => this.myFunction()
     } : null}
     onHandlerExample={this.someotherFunction}
     includeLink
     showChildren
     {...rest}
   >
   

   这种写法可以支持传递自定义参数，比如onClick: () => this.myFunction(reportId, extraData)。
2. 不需要传自定义参数的场景
   完全可以去掉多余的箭头函数包裹，直接把类方法作为回调传入：

   <CardAvReport
     buttonProps={buttonProps ? {
       ...buttonProps,
       small: true,
       onClick: this.myFunction
     } : null}
     onHandlerExample={this.someotherFunction}
     includeLink
     showChildren
     {...rest}
   >
   

   注意：这种写法需要保证类方法的this指向正确，常见的实现方式是使用类属性箭头函数定义方法，或者在constructor中完成bind，避免出现方法执行时this丢失的问题。

你写的ButtonLink组件中存在冗余逻辑，不影响功能但可以简化：
原代码里在定义props2时已经初始化了onClick，后续又重复给props2.onClick赋值，完全是多余的操作，可以修改成更简洁的版本：

import * as React from "react";
import Button from "./Button";

export default props => {
  const { link, onClick, children, ...rest } = props;
  const linkProps = { onClick };
  if (link) linkProps.href = link;
  return (
    <a {...linkProps}>
      <Button {...rest}>{children}</Button>
    </a>
  );
};

以后遇到事件不触发的场景，可以按这个步骤快速定位：

• 先在你传入的onClick回调的第一行加一个console.log("事件触发了")，点击按钮看是否有打印。如果有打印，说明事件绑定链路是通的，问题出在回调内部的逻辑写错误（比如这次漏加函数调用括号的问题）；如果没有打印，再去排查组件传递、DOM事件绑定的链路问题。

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