React中复用BaseToolbar组件的按钮onClick事件处理方案

你的思路完全可行，这是React中实现通用UI组件复用、业务逻辑与UI分离的标准实践，既能保证BaseToolbar的复用性，又能让调用方灵活处理业务逻辑。

核心实现思路 #

让BaseToolbar通过props接收回调函数，把按钮的点击事件委托给调用它的组件（比如Patients.js）来处理，组件本身只负责UI渲染，不绑定具体业务逻辑。

具体实现步骤 #

1. 改造BaseToolbar组件

修改组件，将三个按钮的onClick事件通过props传入，同时设置默认空函数避免未传回调时报错：

// BaseToolbar.js
import React from 'react';

const BaseToolbar = ({ onAdd, onEdit, onRemove }) => {
  // 设置默认空函数，防止未传props时触发报错
  const handleAdd = onAdd || (() => {});
  const handleEdit = onEdit || (() => {});
  const handleRemove = onRemove || (() => {});

  return (
    <div className="toolbar">
      <button onClick={handleAdd}>Add</button>
      <button onClick={handleEdit}>Edit</button>
      <button onClick={handleRemove}>Remove</button>
    </div>
  );
};

export default BaseToolbar;

2. 在Patients.js中调用并绑定事件

在调用组件里定义具体的业务处理函数，通过props传递给BaseToolbar：

// Patients.js
import React from 'react';
import BaseToolbar from './BaseToolbar';

const Patients = () => {
  const handlePatientAdd = () => {
    // 处理添加患者的业务逻辑，比如打开弹窗、发起API请求等
    console.log('Add patient clicked');
  };

  const handlePatientEdit = () => {
    // 处理编辑患者的业务逻辑
    console.log('Edit patient clicked');
  };

  const handlePatientRemove = () => {
    // 处理删除患者的业务逻辑
    console.log('Remove patient clicked');
  };

  return (
    <div>
      <h1>患者列表</h1>
      <BaseToolbar 
        onAdd={handlePatientAdd}
        onEdit={handlePatientEdit}
        onRemove={handlePatientRemove}
      />
      {/* 其他患者相关UI */}
    </div>
  );
};

export default Patients;

进阶优化（提升复用性） #

如果需要让BaseToolbar适配更多场景（比如某些页面不需要某个按钮），可以新增props控制按钮的显示状态：

// 改造后的BaseToolbar.js
const BaseToolbar = ({ onAdd, onEdit, onRemove, showAdd = true, showEdit = true, showRemove = true }) => {
  const handleAdd = onAdd || (() => {});
  const handleEdit = onEdit || (() => {});
  const handleRemove = onRemove || (() => {});

  return (
    <div className="toolbar">
      {showAdd && <button onClick={handleAdd}>Add</button>}
      {showEdit && <button onClick={handleEdit}>Edit</button>}
      {showRemove && <button onClick={handleRemove}>Remove</button>}
    </div>
  );
};

调用时可以灵活控制：

// 比如某个页面只需要Add按钮
<BaseToolbar onAdd={handleAdd} showEdit={false} showRemove={false} />

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