draftjs - 类型错误 : editorState. getCurrentContent 不是函数

Question

我正在尝试控制台 react 草稿所见即所得的结果，并且我得到 editorState.getCurrentContent 不是一个函数。我不知道我哪里出错了。预先非常感谢并非常感谢任何帮助。谢谢

import React,{useState} from 'react'
import { render } from 'react-dom';
import { Editor } from 'react-draft-wysiwyg';
import {EditorState} from "draft-js";
import { stateToHTML } from "draft-js-export-html";
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

const AddBlog= () => {
    const [editorState, setEditorState] = useState(
        () => EditorState.createEmpty(),
      );

    const handleChange = (editorState) =>{
        const contentState = stateToHTML(editorState.getCurrentContent())
        // JSON.stringify(convertToRaw(editorState.getCurrentContent()))
        console.log(contentState)
       }


    return (
        <div className="container-fluid">
        <div className="card-wrapper-tutorial">
            <div className="card">
                <div className="card-body">
                <h4 className="card-title">New Code Snippet</h4>
                    <form autoComplete="off">
                        <div className="form-group">
                            <label htmlFor="title">Title</label>
                            <input id="title" type="text" className="form-control"  placeholder="title" name="title"  disabled = {disabled}  onChange={handleChange}  />
                        </div>
                        <div className="form-group">
                            <label htmlFor="body">Body</label>
                            <Editor  
                                defaultEditorState={editorState}
                                onEditorStateChange={setEditorState}
                                wrapperClassName="wrapper-class"
                                editorClassName="editor-class"
                                toolbarClassName="toolbar-class"
                                onChange={handleChange}
                                />
                        </div>
                       <div className="form-group">
                            <button type="submit" className="btn btn-primary btn-block">
                        {loading && <i className="fa fa-refresh fa-spin"></i>}
                        &nbsp;Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    )
}

export default AddBlog

Answer 1

您在两个不属于的地方有 handleChange

1. 在输入的 onChange 上，onChange 的回调不会 是一个 editorState 但输入事件 e .
2. 在编辑器上 组件，onChange 的回调不会是 editorState 还有一个 RawDraftContentState ，它是字符串 html。

您可能打算将其放置在 Editor 的 onEditorStateChange 中:

      <Editor
        defaultEditorState={editorState}
        onEditorStateChange={editorState => {
          setEditorState(editorState);
          handleChange(editorState);
        }}
        wrapperClassName="wrapper-class"
        editorClassName="editor-class"
        toolbarClassName="toolbar-class"
      />

或者保留代码不变并修改handleChange以期望RawDraftContentState

    const handleChange = (rawDraftContentState) =>{
        // no need for convertToRaw or stateToHtml anymore
        console.log(rawDraftContentState)
    }