在Ionic React卡上向右和向左滑动

import { IonItem, IonItemSliding, IonItemOptions, IonItemOption } from '@ionic/react';
import React, { useState } from 'react';

const CardComponent: React.FC = () => {
  const [swiped, setSwiped] = useState(false);
  
  const handleSwipe = (e: any) => {
    if(e.detail.ratio > 0 && !swiped) {
      setSwiped(true);
      // 向右滑动的操作
    } else if (e.detail.ratio < 0 && swiped) {
      setSwiped(false);
      // 向左滑动的操作
    }
  }
  
  return (
    <IonItemSliding onIonDrag={handleSwipe}>
      <IonItem>
        {/* 卡片内容 */}
      </IonItem>
      
      <IonItemOptions side="end">
        <IonItemOption color="danger" expandable>
          删除
        </IonItemOption>
      </IonItemOptions>
    </IonItemSliding>
  );
}

const handleDelete = () => {
  // 执行删除操作
}

<IonItemOptions side="end">
  <IonItemOption color="danger" expandable onClick={handleDelete}>
    删除
  </IonItemOption>
</IonItemOptions>