ソースを参照

prevent item action click propagation

mightyplow 4 年 前
コミット
4d70bf5816
1 ファイル変更9 行追加2 行削除
  1. 9 2
      src/components/caloriesList/ItemActions.tsx

+ 9 - 2
src/components/caloriesList/ItemActions.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { EventHandler, SyntheticEvent } from 'react';
 import cx from 'classnames';
 import { IconButton } from '../button/IconButton';
 import { iconTypes } from '../icon/iconTypes';
@@ -9,6 +9,13 @@ type ItemActionsProps = {
   className?: string
 };
 
+function stopPropagation (callback: EventHandler<SyntheticEvent>): EventHandler<SyntheticEvent> {
+  return (event: SyntheticEvent) => {
+    event.stopPropagation();
+    callback(event);
+  };
+}
+
 function ItemActions (props: ItemActionsProps) {
   const {
     className,
@@ -17,7 +24,7 @@ function ItemActions (props: ItemActionsProps) {
 
   return (
     <section className={cx(styles.itemActions, className)}>
-      <IconButton icon={iconTypes.TRASH} buttonClassName={styles.button} onClick={removeItem} />
+      <IconButton icon={iconTypes.TRASH} buttonClassName={styles.button} onClick={stopPropagation(removeItem)} />
     </section>
   );
 }