React TypeScript中是否有更优的模块化事件类型处理方案？

方案1：简化类型断言与冗余代码 #

把重复的e.target类型断言抽成变量，减少代码冗余，提升可读性：

const typeHandler = (e: MouseEvent<HTMLElement>) => {
  const target = e.target as HTMLButtonElement;
  if (target.tagName === "BUTTON") {
    const selectedType = target.innerText.toLowerCase().replace(" ", "_");
    setType(selectedType);
  }
};

方案2：用data属性替代innerText（更健壮） #

依赖按钮文本内容存在风险——文本修改会直接导致逻辑失效。改用自定义data-type属性存储目标值，逻辑更稳定：

按钮示例 #

<button data-type="user_type">用户类型</button>
<button data-type="admin_type">管理员类型</button>

事件处理函数 #

const typeHandler = (e: MouseEvent<HTMLElement>) => {
  const target = e.target as HTMLButtonElement;
  if (target.hasAttribute("data-type")) {
    const selectedType = target.getAttribute("data-type")!;
    setType(selectedType);
  }
};

方案3：模块化拆分逻辑 #

将类型转换的逻辑抽成独立函数，提升复用性和可维护性：

// 抽离通用转换逻辑
const formatButtonType = (text: string): string => {
  return text.toLowerCase().replace(" ", "_");
};

const typeHandler = (e: MouseEvent<HTMLElement>) => {
  const target = e.target as HTMLButtonElement;
  if (target.tagName === "BUTTON") {
    const selectedType = formatButtonType(target.innerText);
    setType(selectedType);
  }
};

方案4：直接绑定按钮事件（避免事件委托） #

如果按钮是可控渲染的（比如React中循环生成），可以直接给每个按钮绑定事件，省去目标元素判断步骤：

渲染示例（React场景） #

const typeOptions = [
  { label: "用户类型", value: "user_type" },
  { label: "管理员类型", value: "admin_type" }
];

return (
  <div>
    {typeOptions.map(opt => (
      <button 
        key={opt.value} 
        onClick={() => setType(opt.value)}
      >
        {opt.label}
      </button>
    ))}
  </div>
);

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