如何在可点击的卡片上创建两个 onclick 事件以做出反应答案

【问题标题】：How to create two onclick events on a clickable cards in react如何在可点击的卡片上创建两个 onclick 事件以做出反应
【发布时间】：2020-08-14 11:31:45
【问题描述】：

我知道以前有人问过这类问题，但在这里我有一个问题，我有一个可点击的卡片和一个卡片中的一个组件，它是按钮，onclick 整个卡片正在被点击，但我想要一个按钮被点击点击按钮和卡片点击卡片。我怎样才能呈现这两个事件？我如何为这两个事件使用目标？我是新手反应，有人可以帮我渲染两者。

Current onclick code:

handleClick = (event) => {
console.log("cards click");
event.preventDefault();
};

handleSubmit(event) {
console.log("button inside card click");
const target = event.target;
}

【问题讨论】：

整张卡片上是否有 onclick 事件？如果是，那么正在发生的事情是首先执行您的 btn onclick 事件，然后执行卡的 onclick 事件。这是以反向树格式从子节点到父节点的事件冒泡

标签： reactjs events

【解决方案1】：

当一个事件发生在一个元素上时，它首先运行它的处理程序，然后是它的父代，然后一直到其他祖先。

这个过程称为事件冒泡，了解更多here。

要解决您的问题，您必须在按钮的事件处理程序中调用 event.stopPropagation()。

export default function App() {
  function handleClick(event) {
    console.log("cards click");
  }

  function handleSubmit(event) {
    event.stopPropagation(); // notice this
    console.log("button inside card click");
  }

  return (
    <div className="card" onClick={handleClick}>
      <button onClick={handleSubmit}>BUTTON INSIDE CARD</button>
    </div>
  );
}

【讨论】：

【解决方案2】：

如果您希望 Card onClick 事件在按下按钮之前执行，在这种情况下您希望使用 handleSubmit 函数，那么我会将卡片点击函数放在 if 循环中以按事件目标类型进行过滤：

handleClick = (e) => { if (e.target.type !== 按钮) { 点击事件代码 }}

【讨论】：

【解决方案3】：

你可以在按钮点击事件中使用event.preventDefault();

function handleSubmit(event) {
    event.preventDefault();
    console.log("button inside card click");
  }

【讨论】：

【解决方案4】：

这称为事件冒泡。事件从子级传递给父级的位置。

event.stoppropagation() 停止它。

您可以将 event.target 传递给您的处理程序并检查是否应根据目标的属性执行处理程序。例如，您可以通过以下方式检查：

handleClick = (e) => { if (e.target.name /type/id == your desired name/type/id) { then your code, e.stop.propagation()}

在你的去空代码被执行之后。 e.stopPropagation() 将停止将事件冒泡到其父级。

【讨论】：