首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >TypeError:使用Draft.js编辑器时,editorState.getCurrentContent不是函数

TypeError:使用Draft.js编辑器时,editorState.getCurrentContent不是函数
EN

Stack Overflow用户
提问于 2021-08-05 13:54:04
回答 1查看 325关注 0票数 0

我正在尝试添加react-draft-wysiwyg编辑器。我试图获取编辑器的当前内容,但它显示错误,因为getCurrentContent()不是一个函数。有谁能帮帮忙吗?

代码语言:javascript
复制
import React, { useState } from 'react';

import { Editor } from "react-draft-wysiwyg";
import { EditorState } from "draft-js";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import { convertToHTML } from 'draft-convert';
import DOMPurify from 'dompurify';


const NoteEditor = () => {

    const [editorState, setEditorState] = useState(
        () => EditorState.createEmpty(),
    );
    const [convertedContent, setConvertedContent] = useState("");

    const handleEditorChange = (state) => {
        setEditorState(state);
        convertContentToHTML();
      }
    const convertContentToHTML = () => {
        let currentContentAsHTML = convertToHTML(editorState.getCurrentContent());
        setConvertedContent(currentContentAsHTML);
    }
    const createMarkup = (html) => {
        return  {
          __html: DOMPurify.sanitize(html)
        }
      }
      
    return(
        <div className="note-editor">
            <Editor 
                defaultEditorState={editorState}
                onChange={handleEditorChange}
                wrapperClassName="wrapper-class"
                editorClassName="editor-class"
                toolbarClassName="toolbar-class"
            />
            <div className="preview" dangerouslySetInnerHTML={createMarkup(convertedContent)}></div>
        </div>
    )
};

export default NoteEditor;
EN

回答 1

Stack Overflow用户

发布于 2021-08-17 04:47:01

你可以这样使用,有时候useState把时间当做它的异步,

代码语言:javascript
复制
const handleEditorChange = (state) => {
    setEditorState(state);
    convertContentToHTML(state);
  }
const convertContentToHTML = (editorState) => {
    let currentContentAsHTML = convertToHTML(editorState.getCurrentContent());
    setConvertedContent(currentContentAsHTML);
}

或者用editorStateuseEffect

代码语言:javascript
复制
useEffect(()=>{},[editorState])
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/68667943

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档