SetContents SunEditor 不工作反应 [英] SetContents SunEditor is not working React
问题描述
我一直在使用 SunEditor 进行测试，因为我想预加载存储在数据库中的 HTML 文本，并让用户在必要时对其进行修改.我正在从父级传递一个 ref 变量，因此当单击提交按钮时，他可以获得该值并保存修改.setContents 有时只是工作.当我保存项目并再次编译时出现文本.但是如果我使用该应用程序或刷新窗口文本就会消失.我已经检查过该变量是否仍然具有该值.我是 React 的新手，我不确定是我做错了还是 suneditor-react 失败了.你能帮我吗?
这是我的代码:
export const TranslationArea = React.forwardRef((props, ref) =>{const handleEditorChange = (value) =>{控制台日志(值)；ref.current=值；}const handleClick = () =>{console.log(ref.current);}返回(<div><h2>{props.title}</h2><SunEditor自动对焦={真}宽度=100%"高度=150像素"设置选项={{按钮列表:[//默认['撤销重做']，['粗体'、'下划线'、'斜体'、'列表']、['表格'，'链接'，'图片']，['全屏']]}}setContents={props.content}onChange={handleEditorChange}/><div>{props.content}</div><button onClick={handleClick}>内容</button>);});
这是在SunEditor div中正确加载内容的屏幕截图(仅在编译项目时):
如果我刷新页面或导航到相同的链接...
我显示了一个具有相同 props.content 的 div 只是为了检查 forwardRef 是否正常工作.为什么 setContents 现在有效?我已经使用 React 工具进行了检查并加载了该属性:
有什么想法吗?
我正在从父级传递一个 ref 变量，因此当点击提交按钮时，他可以获得值并保存修改.
如果您只需要访问值，那么让我们传递一个回调.我们将其命名为 onSumbit，它将是一个从 SunEditor 组件中获取 string 值的函数.
为了访问当前编辑的值，我在 TranslationArea 组件中使用本地状态，并通过编辑器的 onChange 方法更新该状态.然后当提交按钮被点击时，我从本地状态用 content 的值调用 onSubmit .(可能还有其他方法可以做到这一点，但我不熟悉 SunEditor).
TranslationArea 组件如下所示:
export const TranslationArea = ({initialContent = "", title, onSubmit}) =>{const [content, setContent] = useState(initialContent);返回(<div><h2>{title}</h2><SunEditor自动对焦={真}宽度=100%"高度=150像素"设置选项={{按钮列表:[//默认['撤销重做']，['粗体'、'下划线'、'斜体'、'列表']、['表格'，'链接'，'图片']，['全屏']]}}setContents={initialContent}onChange={setContent}/><div>{内容}</div><button onClick={() =>onSubmit(content)}>提交</button>);};
我在我的 CodeSandbox 中测试了它，给它一个 onSubmit 函数来记录提交的内容，但你可以用它做任何你需要的事情.
导出默认函数 App() {const initialContent = "Hello World";const onSubmit = (content: string) =>{console.log(提交的内容", content);};返回 (<翻译区初始内容={初始内容}onSubmit={onSubmit}标题=编辑文本"/>);}
I have been testing with SunEditor since I want to pre-load an HTML text stored in DB and let users modify it if necessary. I'm passing a ref variable from parent so when the submit button is clicked he could get the value and save modificacions. setContents is just working sometimes. When I save the project and is compiled again text appeared. But if I use the app or refresh the window text dissapear. I have checked that the variable still has the value. I'm new to React and I'm not sure If I'm doing it wrong or just suneditor-react failing. Can you help me?
Here is my code:
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>
);
});
Here is the screenshot with content properly loaded inside SunEditor div (only when compiling project):
If I refresh the page or navigate to the same link...
I have displayed a div with the same props.content just to check that fowardRef is working. Why setContents is now working? I have inspect with React tools and the property is loaded:
Any idea?
I'm passing a ref variable from parent so when the submit button is clicked he could get the value and save modifications.
If all you need to access is the value, let's pass down a callback instead. We'll call it onSumbit and it will be a function which takes the string value from the SunEditor component.
In order to have access to the current edited value, I am using a local state in the TranslationArea component and updating that state through the editor's onChange method. Then when the submit button is clicked, I call onSubmit with the value of content from the local state. (There might be another way to do this but I'm not familiar with SunEditor).
The TranslationArea component looks like this:
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>
);
};
I tested it in my CodeSandbox by giving it an onSubmit function which logs the submitted content, but you can do whatever you need to with it.
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>
);
}
这篇关于SetContents SunEditor 不工作反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
