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

Question

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

Current onclick code:

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

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

标签： reactjsevents

Answer 1

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

这个过程称为事件冒泡，在此处了解更多信息。

要解决您的问题，您必须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>
  );
}