SetContents SunEditor 不工作 React

Question

我一直在使用 SunEditor 进行测试，因为我想预加载存储在数据库中的 HTML 文本，并让用户在必要时对其进行修改。我正在从父级传递一个 ref 变量，因此当单击提交按钮时，他可以获得值并保存修改。 setContents 有时只是工作。当我保存项目并再次编译时，文本出现了。但是如果我使用该应用程序或刷新 window 文本消失。我检查过该变量仍然具有值。我是 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 中正确加载内容的屏幕截图（仅在编译项目时）：

如果我刷新页面或导航到同一个 link...

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

有什么想法吗？

Answer 1

I'm passing a ref variable from parent so when the submit button is clicked he could get the value and save modifications.

如果您只需要访问值，让我们传递一个回调。我们称它为 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

SetContents SunEditor 不工作 React

SetContents SunEditor is not working React

javascript

reactjs

react-ref

react-hooks

suneditor