reactjs react-draft-wysiwyg闪烁一次i键入到下一个js中的输入字段

xpcnnkqh  于 2022-11-29  发布在  React
关注(0)|答案(4)|浏览(123)

输入字段一直在闪烁。这里是我使用代码的地方(编辑器组件)。我也用next/dynamic导入包,我不知道这是否有帮助,谢谢

<Editor
      editorState={editorState}
      wrapperStyle={{ backgroundColor: "white", height: "300px" }}
      onEditorStateChange={setEditorState}
    />
xxls0lw8

xxls0lw81#

我建议尝试修剪问题,在什么情况下发生,在什么情况下不会。
1.确保CSS在那里。(闪烁通常是错误的风格)
1.确保使用EditorState.createEmpty()初始化空编辑器状态
1.是否仍在闪烁?强制静态导入以检查是否有问题
1.是否仍在闪烁?请删除onChangeHandler并将其留空。
1.给我反馈:)
这是一个应该可以工作的官方文档示例

import React, { Component } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';

const MyEditor = () => {
  const [editor, setEditor] = useState(EditorState.createEmpty());
  return (
    <Editor
      editorState={editor}
      wrapperClassName="demo-wrapper"
      editorClassName="demo-editor"
      onEditorStateChange={setEditor}
    />
  )
}
xmq68pz9

xmq68pz92#

你能不能检查不动态导入它,仍然闪烁?
import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

5jvtdoz2

5jvtdoz23#

找到了一个修复,不知道它是否合适,虽然我用useMemo挂钩 Package 了动态导入

const Editor = useMemo(() => {
return dynamic(
  () => import("react-draft-wysiwyg").then((mod) => mod.Editor),
  { ssr: false }
);}, []);
ddarikpa

ddarikpa4#

这对我有用

const Editor = useMemo(() => {
    return dynamic(
      () => import("react-draft-wysiwyg").then((mod) => mod.Editor),
      { ssr: false }
    );}, []);

相关问题