Next.js toast editor 값을 가져오고 싶습니다.

등록 버튼을 눌렀을 때, 입력 한 값을 가져오고 싶은데, undefined가 뜹니다. 어떻게 가져올 수 있는걸까요? ㅜㅜ

1import * as Write from "./BoardWrite.styles";
2import dynamic from "next/dynamic";
3import "@toast-ui/editor/dist/toastui-editor.css";
4import { EditorProps } from "@toast-ui/react-editor";
5import { CommentInput } from "../../../VisitLog/VisitLog.styles";
6import { useEffect, useRef, useState } from "react";
7
8const Editor = dynamic<EditorProps>(
9  () => import("@toast-ui/react-editor").then((m) => m.Editor),
10  { ssr: false }
11);
12
13export default function BoardWrite() {
14  const contentRef = useRef(null);
15
16  const onChangeContent = () => {
17    const data = contentRef.current?.getInstance().getHTML();
18    console.log(data);
19  };
20
21  const [title, setTitle] = useState("");
22  const [content, setContent] = useState("");
23  // url hash
24  let hash;
25
26  useEffect(() => {
27    // get url hash
28    // ex) #blog => blog
29    hash = window.location.hash.split("#")[1];
30    console.log(hash);
31  }, []);
32
33  const onSubmit = () => {
34    console.log(contentRef.current?.getInstance().getHTML());
35    console.log(contentRef.current?.getInstance().getMarkdown());
36  };
37
38  return (
39    <Write.Wrapper>
40      <CommentInput
41        style={{ width: "100%", marginBottom: "20px" }}
42        placeholder="title"
43        onChange={(e) => {
44          setTitle(e.target.value);
45          console.log(title);
46        }}
47      />
48      <Editor
49        ref={contentRef}
50        onChange={onChangeContent}
51        initialValue="type here!"
52        previewStyle="vertical"
53        height="100%"
54        initialEditType="markdown"
55        useCommandShortcut={false}
56        hideModeSwitch={true}
57      />
58      <button onClick={onSubmit}>등록</button>
59    </Write.Wrapper>
60  );
61}

이 질문이 도움이 되었나요?

'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

추천해요 0

보충이 필요해요 0

준영 프론트엔드 개발자 님의 질문