React-Ionic中SwiperJS配合Modal异常：自动切换激活幻灯片

在Ionic分类页中存在多个Swiper组件，每个幻灯片内的按钮点击会弹出页面唯一的外部Modal。出现以下异常：

• 关闭Modal后，当前操作的Swiper偶尔会自动切换到之前点击过的幻灯片（已确认触发onSlideChange事件）
• 点击其他Swiper的幻灯片时，第一个出现问题的Swiper会自动切换幻灯片，同时页面滚动至该幻灯片位置

已更新至最新依赖版本：

"@ionic/pwa-elements": "^3.3.0",
"@ionic/react": "^8.3.1",
"@ionic/react-router": "^8.3.1",
"swiper": "^11.1.14"

• 给每个Swiper绑定独立的状态控制：为每个Swiper组件单独维护activeIndex状态，通过initialSlide和onSlideChange同步更新，避免多个Swiper共享隐式状态导致的干扰。示例代码：

  const [swiper1ActiveIndex, setSwiper1ActiveIndex] = useState(0);
  const [swiper2ActiveIndex, setSwiper2ActiveIndex] = useState(0);
  
  // 对应Swiper组件配置
  <Swiper
    initialSlide={swiper1ActiveIndex}
    onSlideChange={(swiper) => setSwiper1ActiveIndex(swiper.activeIndex)}
    // 其他配置
  >
    {/* 幻灯片内容 */}
  </Swiper>
  

• 关闭Modal时重置Swiper焦点与状态：通过useRef获取目标Swiper实例，在Modal关闭回调中手动指定当前活动幻灯片，同时将焦点移回触发按钮，避免焦点丢失引发的自动滑动：

  const targetSwiperRef = useRef<Swiper | null>(null);
  const [triggerButtonId, setTriggerButtonId] = useState('');
  
  // 按钮点击时记录当前Swiper和按钮ID
  const openModal = (swiperRef: Swiper, buttonId: string) => {
    targetSwiperRef.current = swiperRef;
    setTriggerButtonId(buttonId);
    // 打开Modal逻辑
  };
  
  // Modal关闭回调
  const closeModal = () => {
    if (targetSwiperRef.current) {
      targetSwiperRef.current.slideTo(targetSwiperRef.current.activeIndex);
      document.getElementById(triggerButtonId)?.focus();
    }
    // 关闭Modal逻辑
  };
  

• 禁用Swiper的焦点自动切换特性：在Swiper配置中关闭键盘控制和自动聚焦元素，防止焦点变化触发滑动：

  <Swiper
    keyboard={false}
    focusableElements=""
    // 其他配置
  >
    {/* 幻灯片内容 */}
  </Swiper>
  

• 阻止事件冒泡与干扰：在Modal内部的交互元素上添加事件阻止冒泡，避免关闭时的事件传递到Swiper组件：

  <IonModal onDidDismiss={closeModal}>
    <IonButton onClick={(e) => {
      e.stopPropagation();
      closeModal();
    }}>关闭</IonButton>
    {/* Modal内容 */}
  </IonModal>
  

• 确保DOM元素唯一性：为每个Swiper、幻灯片及内部按钮设置唯一的id和tabindex，避免浏览器焦点管理混乱。

内容的提问来源于stack exchange，提问作者Jan Grb