next.js 在滑动幻灯片内时，编辑器无法对焦

yk9xbfzb 于 2023-10-18 发布在其他

关注(0)|答案(1)|浏览(88)

我使用软件包swiper/react来创建一个用户可以在两个面板之间滑动的视图。我还使用了**@monaco-editor/react**包，这样我的用户就可以编写代码了。
我面临的问题是，当我把编辑器内滑动幻灯片，用户不能点击编辑器或键入任何东西。我推测这是因为刷卡器组件。在下面的代码中，我有两个编辑器的示例。一个在滑杆里另一个在滑杆外面。你会注意到，编辑器是外面的刷卡工作完美，但一个里面没有。如有任何帮助，我们将不胜感激

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

function Index() {
  return (
    <>
      <Swiper>
        <SwiperSlide>
          <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>
        </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;

next.js

来源：https://stackoverflow.com/questions/77311913/editor-isnt-focusable-when-inside-swiper-slide

1条答案

按热度按时间

blmhpbnm1#

Swiper组件可能会干扰编辑器组件的事件处理和焦点管理。

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

const Index = () => {
  const editorRef = useRef(null);

  useEffect(() => {
    if (editorRef.current) {
      editorRef.current.layout();
    }
  }, []);

  return (
    <>
      <Swiper onSlideChange={() => editorRef.current?.layout()}>
        <SwiperSlide>
          // rest of your code.
        </SwiperSlide>
      </Swiper>
    </>
  );
}

export default Index;

useEffect钩子在组件挂载时触发编辑器的布局刷新。

赞(0）回复(0）举报 2023-10-18

我来回答

next.js 在滑动幻灯片内时，编辑器无法对焦

1条答案

相关问题

热门标签

最新问答