在React/TypeScript中如何让keypress事件触发handleClick点击函数

你的handleClick函数强依赖React.MouseEvent<HTMLButtonElement>类型的事件对象，尤其是用到了e.currentTarget.name属性，同时step、updateName两个函数也要求接收鼠标事件作为第一个入参。直接从键盘事件场景构造完全符合类型校验的鼠标事件成本很高，也不符合业务逻辑——你本质是键盘触发的操作，没必要硬模拟鼠标事件的全部属性。

把和事件类型无关的业务逻辑单独抽离，不管是鼠标点击还是键盘触发都调用这套公共逻辑，从根源上避免事件类型绑定问题：

// 抽离公共的下一步逻辑，参数只取实际需要的业务字段
const goNext = (targetBtnName: string) => {
  if (!first || !last) {
    return setError(true);
  }
  // 若可修改step、updateName的入参定义，建议直接把第一个事件参数去掉，只传需要的业务值
  // 若暂时无法修改这两个函数的定义，用类型断言兼容即可
  step(null as unknown as React.MouseEvent<HTMLButtonElement>, targetBtnName);
  updateName(null as unknown as React.MouseEvent<HTMLButtonElement>, first, last);
}

// 点击事件直接调用公共逻辑，从事件对象里取按钮name
function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
  goNext(e.currentTarget.name);
}

// 键盘事件也调用公共逻辑，直接传入下一步按钮的name属性值即可
function handleKeyPress(e: React.KeyboardEvent<HTMLDivElement>) {
  if (e.code === "Enter") {
    // 这里替换为你实际给下一步按钮设置的name属性值
    goNext("nextStepBtn");
  }
}

如果你完全没法修改step、updateName的入参定义，必须传入合法的鼠标事件对象，可以手动构造最小可用对象配合类型断言：

function handleKeyPress(e: React.KeyboardEvent<HTMLDivElement>) {
  if (e.code === "Enter") {
    // 构造仅包含你用到的字段的对象，断言为要求的鼠标事件类型
    const mockMouseEvent = {
      currentTarget: {
        // 替换为你实际给下一步按钮设置的name属性值
        name: "nextStepBtn"
      }
    } as unknown as React.MouseEvent<HTMLButtonElement>;
    handleClick(mockMouseEvent);
  }
}

• 优先调整step和updateName的入参定义，移除不必要的事件对象参数，只传入实际用到的业务字段，类型校验会更合理，后续维护成本也更低
• 键盘事件监听建议绑定在表单容器或者对应输入框组上，必要时添加e.preventDefault()阻止Enter触发默认的表单提交行为，避免冲突

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