SetContentsSunEditorが機能していませんReact
DBに保存されているHTMLテキストをプリロードし、必要に応じてユーザーが変更できるようにしたいので、SunEditorでテストしています。親から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内にコンテンツが適切にロードされたスクリーンショットです（プロジェクトのコンパイル時のみ）。
ページを更新するか、同じリンクに移動すると...
fowardRefが機能していることを確認するためだけに、同じprops.contentでdivを表示しました。setContentsが機能しているのはなぜですか？Reactツールで検査しましたが、プロパティが読み込まれます。
何か案が？
回答
親からref変数を渡しているので、送信ボタンをクリックすると、値を取得して変更を保存できます。
アクセスする必要があるのが値だけの場合は、代わりにコールバックを渡しましょう。これを呼び出して、コンポーネントから値を取得onSumbitする関数にstringなりSunEditorます。
現在編集されている値にアクセスするために、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>
);
};
onSubmit送信されたコンテンツをログに記録する関数をCodeSandboxでテストしましたが、必要なことは何でもできます。
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リンク