swiper slide内的Editor无法获取焦点问题求助

问题原因 #

Swiper组件默认会拦截slide内的触摸/鼠标事件以实现滑动切换，这会导致Monaco Editor无法获取焦点、接收输入。

解决方案 #

方法1：使用Swiper的noSwipingClass属性 #

通过指定类名，让Swiper不对带有该类的元素进行滑动拦截，Editor即可正常交互：

修改代码如下：

import Editor, { loader } from "@monaco-editor/react";
import { Swiper, SwiperSlide } from "swiper/react";

function Index() {
  return (
    <>
      {/* 配置noSwipingClass，指定排除滑动拦截的类名 */}
      <Swiper noSwipingClass="no-swipe">
        <SwiperSlide>
          {/* 给Editor外层容器添加no-swipe类 */}
          <div style={{ height: "400px" }} className="no-swipe">
            <Editor
              width="100%"
              height="100%"
              options={{
                minimap: { enabled: false },
                readOnly: false,
                overviewRulerBorder: false,
                padding: { top: 25 },
                lineDecorationsWidth: 0,
                selectionHighlight: false,
                occurrencesHighlight: false,
                tabSize: 2,
                fontSize: 14.5,
              }}
              className="code-editor-window"
            />
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div>
            <h1>Test Slide</h1>
          </div>
        </SwiperSlide>
      </Swiper>
      <br />
      <div style={{ height: "400px" }}>
        <Editor
          width="100%"
          height="100%"
          options={{
            minimap: { enabled: false },
            readOnly: false,
            overviewRulerBorder: false,
            padding: { top: 25 },
            lineDecorationsWidth: 0,
            selectionHighlight: false,
            occurrencesHighlight: false,
            tabSize: 2,
            fontSize: 14.5,
          }}
          className="code-editor-window"
        />
      </div>
    </>
  );
}

export default Index;

方法2：阻止Editor区域的事件冒泡 #

如果方法1不生效，可直接在Editor元素上阻止触摸/鼠标事件冒泡，避免被Swiper拦截：

<Editor
  // ...其他原有属性
  onTouchStart={(e) => e.stopPropagation()}
  onMouseDown={(e) => e.stopPropagation()}
/>

补充说明 #

• noSwipingClass属性在Swiper 6及以上版本均支持；
• 方法1更灵活，仅排除Editor区域的滑动拦截，保留slide其他区域的滑动功能；方法2会完全阻止Editor区域的滑动事件传递给Swiper。

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