在 React 中覆盖 onClick

Question

这是一个有点奇怪的问题。 我在 React 中处理事件类型，我们希望在某些情况下使用 onClick，在其他情况下使用 onPointerDownCapture（出于某些原因）。 但为了更一般化，它可以是任何两个不同的类点击事件。 问题是虽然我们可以在表达式的右侧分配任何 function 处理程序，但左侧必须是 static，本质上。 所以，

<button onClick={handler} vs onPointerDownCapture={handler} } vs onMouseDown={ onMouseDown={handler} />

我认为只使用 onPointerDownCapture 对于大多数用例来说都很好，但在一个完美的世界中，我可以在运行时根据其他变量在这些之间切换。 是否可以覆盖按钮/div/任何原型或其他东西上的 onClick 以成为我想要的任何事件类型？

很多谷歌搜索。 没有成功。

Answer 1

我不完全理解你所说的“重写 onClick”是什么意思，但是

问题是虽然我们可以在表达式的右侧分配任何 function 处理程序，但左侧必须是 static，本质上。

这不是真的，左侧可能是动态的，方法如下：

<button {...({ [eventName]: handler })} />

我想这可以解决您的问题。

---

好的，上面的语法有点简洁，而且确实令人困惑。 这是很好的旧 JSX 传播道具语法，就在内联 object 文字之上。

我会给你另一个等效的形式，希望它应该更具可读性。

const eventName = someCondition ? "onPointerDownCapture" : "onClick"

const props = { 
  [eventName]: handler
}

<button {...props} />

Answer 2

您必须使用这些属性名称，并且对所有 3 个属性名称使用相同的 function 名称。

这 3 个属性的作用是注册关联的事件。

也许你可以使用useEffect并有条件地添加一个事件监听器而不是建议的 React 属性。

Answer 3

我认为最好的是评论中的@vera解决方案。 将额外的属性传递给组件（例如 isOnClick），并基于它传递回调或未定义到事件处理程序属性：

function Component(props: { isOnClick: boolean; callback: () => void }) {
  return (
    <div
      onClick={props.isOnClick ? props.callback : undefined}
      onMouseDown={props.isOnClick ? undefined : props.callback}
    />
  );
}

请注意，将 undefined 传递给 prop 与不设置该 prop 相同。

或者有条件地返回组件：

function Component(props: { isOnClick: boolean; callback: () => void }) {
  if (props.isOnClick) {
    return <div onClick={props.callback}/>
  } else {
    return <div onMouseDown={props.callback}/>
  };
}