如何将按钮中的href属性替换为onClick事件？

直接按下面的步骤修改即可：

1. 移除链接相关属性：删掉原代码里的href和target，这两个属性用于链接跳转，换成点击事件后不再需要。
2. 定义点击处理函数：写一个符合TypeScript类型要求的事件处理函数，用React.MouseEventHandler约束类型，避免类型报错。
3. 绑定onClick事件：把处理函数传给PrimaryButton的onClick属性。

示例代码 #

首先定义点击处理函数：

const handleButtonClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
  // 在这里写需要执行的操作，比如发送请求、打开模态框等
  console.log("按钮已点击");
  // 如有需要可阻止默认行为：event.preventDefault();
};

修改后的PrimaryButton组件：

<PrimaryButton
    className={}
    onClick={handleButtonClick}
>
    {/* some code */}
</PrimaryButton>

自定义组件注意事项 #

如果PrimaryButton是你自行封装的自定义组件，要确保它的Props类型包含onClick，并将该属性传递给内部的原生按钮元素：

// 定义组件Props类型
interface PrimaryButtonProps {
  className?: string;
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
  // 其他需要的属性
}

// 自定义PrimaryButton组件
const PrimaryButton = ({ className, onClick, children }: PrimaryButtonProps) => {
  return (
    <button 
      className={`primary-button ${className}`} 
      onClick={onClick}
    >
      {children}
    </button>
  );
};

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