如何为Fluent UI v9的SplitButton添加点击事件处理器？

官方文档关于SplitButton主按钮点击事件的说明确实不够明确，这里提供一个完整的实现示例：

import { SplitButton, MenuItem } from '@fluentui/react-components';

function MySplitButton() {
  // 主按钮点击事件处理器
  const handlePrimaryButtonClick = () => {
    console.log('主按钮已触发点击');
    // 在此添加你的业务逻辑，比如提交表单、触发弹窗等
  };

  // 下拉菜单项点击事件处理器
  const handleMenuItemClick = (_, item: MenuItem) => {
    console.log(`选中菜单选项：${item.children}`);
  };

  return (
    <SplitButton
      primaryAction={{
        children: '默认操作',
        onClick: handlePrimaryButtonClick // 绑定主按钮点击事件
      }}
      menu={{
        items: [
          { key: 'opt1', children: '选项一', onClick: handleMenuItemClick },
          { key: 'opt2', children: '选项二', onClick: handleMenuItemClick },
          { key: 'opt3', children: '选项三', onClick: handleMenuItemClick }
        ]
      }}
    />
  );
}

export default MySplitButton;

关键说明 #

• SplitButton的主按钮配置通过primaryAction属性完成，该属性支持普通Button组件的所有Props，包括onClick事件处理器。
• 下拉菜单项的点击事件则通过每个菜单项的onClick单独绑定，和主按钮的事件互不干扰。

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