SetContents SunEditor 不工作

Question

我一直在使用 SunEditor 进行测试，因为我想预加载存储在 DB 中的 HTML 文本并让用户在必要时对其进行修改。我正在从父级传递一个 ref 变量，因此当单击提交按钮时，他可以获得值并保存修改。 setContents 有时只是工作。当我保存项目并再次编译时，出现了文本。但是，如果我使用该应用程序或刷新窗口文本消失。我已经检查过该变量是否仍然具有该值。我是 React 的新手，我不确定是我做错了还是 suneditor-react 失败了。你能帮帮我吗？

这是我的代码：

export const TranslationArea = React.forwardRef((props, ref) =>{    
    
    const handleEditorChange = (value) => {
        console.log(value);  
    
        ref.current= value;
      }
     const handleClick  = () => {
         console.log(ref.current);
     } 
    return(
        <div>
            <h2>{props.title}</h2>
                <SunEditor 
                    autoFocus={true}
                    width="100%"
                    height="150px"
                    setOptions={{
                        buttonList: [
                            // default
                            ['undo', 'redo'],
                            ['bold', 'underline', 'italic', 'list'],
                            ['table', 'link', 'image'],
                            ['fullScreen']
                        ]
                    
                    }}
                    setContents={props.content}
                    onChange={handleEditorChange}
            
                />
                <div>{props.content}</div>
            <button onClick={handleClick}>Content</button>
        </div>
    );
});

这是在 SunEditor div 中正确加载内容的屏幕截图（仅在编译项目时）：

如果我刷新页面或导航到相同的链接...

我显示了一个具有相同 props.content 的 div，只是为了检查 fowardRef 是否正常工作。为什么 setContents 现在可以工作了？我用 React 工具检查并加载了属性：

有什么想法吗？

Answer 1

我从父级传递了一个 ref 变量，因此当单击提交按钮时，他可以获得值并保存修改。

如果您只需要访问值，那么让我们传递一个回调来代替。我们将其称为onSumbit，它将是一个从SunEditor 组件中获取string 值的函数。

为了访问当前编辑的值，我在TranslationArea 组件中使用本地状态，并通过编辑器的onChange 方法更新该状态。然后当点击提交按钮时，我从本地状态调用onSubmit 并使用content 的值。 （可能有另一种方法可以做到这一点，但我不熟悉 SunEditor）。

TranslationArea 组件如下所示：

export const TranslationArea = ({initialContent = "", title, onSubmit}) => {    
  const [content, setContent] = useState(initialContent);

  return(
      <div>
          <h2>{title}</h2>
              <SunEditor 
                  autoFocus={true}
                  width="100%"
                  height="150px"
                  setOptions={{
                      buttonList: [
                          // default
                          ['undo', 'redo'],
                          ['bold', 'underline', 'italic', 'list'],
                          ['table', 'link', 'image'],
                          ['fullScreen']
                      ]
                  
                  }}
                  setContents={initialContent}
                  onChange={setContent}
              />
              <div>{content}</div>
          <button onClick={() => onSubmit(content)}>Submit</button>
      </div>
  );
};

我在我的 CodeSandbox 中对其进行了测试，通过给它一个 onSubmit 函数来记录提交的内容，但你可以用它做任何你需要的事情。

export default function App() {
  const initialContent = "Hello World";
  const onSubmit = (content: string) => {
    console.log("Submitted Content", content);
  };

  return (
    <div className="App">
      <TranslationArea
        initialContent={initialContent}
        onSubmit={onSubmit}
        title="Edit Text"
      />
    </div>
  );
}

CodeSandbox Link