下記のページを参考に、Next.jsでreact-draft-wysiwygを導入しようと考えています。
ブラウザ上で動くリッチなテキストエディタを、React Draft Wysiwygを使って手軽に実装する
実現したいこと
react-draft-wysiwygを動かして、入力内容を const [editorState, setEditorState] = useState("");
で受け取りたい
発生している問題・エラーメッセージ
エラーではないですが、なぜか
const [editorState, setEditorState] = useState("");
を記述し、
<Editor editorState={editorState} 〜省略〜
を追加すると、本番環境とローカル環境で記入できなくなります。(vercelで確認できます。)
このusestateがないと値を受け取れないので、実装したいのですが、原因がまだ分かっていません。
分かる方がいれば教えて頂きたいです。
よろしくお願いします。
https://sample-file.vercel.app/
github
https://github.com/takoyan33/sample-file
該当のソースコード
JavaScript
import React, { useCallback, useContext, useEffect, useState } from "react";
import dynamic from "next/dynamic";
const Editor = dynamic(
() => import("react-draft-wysiwyg").then((mod) => mod.Editor),
{ ssr: false }
);
import { ContentState, convertToRaw, EditorState } from "draft-js";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
export default function Home() {
const [editorState, setEditorState] = useState("");
const handleImageUpload = useCallback(async (file) => {
return await axios
.post
// fileをアップロードし、アップロード後の画像のurlを返す処理
()
.then((response) => {
return { data: { link: response } };
})
.catch((error) => {
return error;
});
}, []);
console.log(editorState);
return (
<div className="container my-5">
<Editor
editorState={editorState}
toolbarClassName="toolbarClassName"
wrapperClassName="wrapperClassName"
editorClassName="editorClassName"
editorStyle={{
border: "solid 1px lightgray",
padding: "5px",
}}
localization={{ locale: "ja" }}
/>
</div>
);
}