スタックされたコンポーネントのクリックイベント

Question

2 つのリアクティブ アロー関数コンポーネントが (絶対位置を使用して) 互いに積み重ねられており、両方とも onClick プロパティを持っています。問題は、一番上のものをクリックすると、両方の onClick 関数が起動することです。この問題を解決する方法はありますか?

これはコードの簡略化されたバージョンです:

リーリー

以下のスクリーンショットは、2 つのコンポーネントをスタックする理由を示しています:

• ホバリング前:
• ホバリング後:

Paper コンポーネントの上にマウスを置いたときにボタンが表示されるようにしたいと思います。問題は、ボタンをクリックすると、expandCard と buttonAction の両方が起動されることです。 (ところで、私はマテリアル UI を使用しています)

Answer 1

$event.stopPropagation(); を使用できます。

リーリー

したがって、あなたの場合、関数 buttonAction をこれに変更する必要があります

リーリー

および return 句

リーリー

詳細については、こちらをご覧ください