javascript - React 草稿所见即所得 - 清除 editorState 后无法在编辑器中键入文本

Question

我正在尝试使用 react-draft-wysiwyg 编辑器完成一些操作后重置编辑器内容。使用 draftjs-utils 中的 clearEditorContent 方法清除所有内容。但是清除内容后，我无法在编辑器中输入任何内容。添加了下面的代码。请帮忙解决这个问题。

import React, { Component } from 'react';
import { EditorState, convertToRaw, ContentState } from 'draft-js';
import { clearEditorContent } from 'draftjs-utils'
import { Editor } from 'react-draft-wysiwyg';
import '../../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';

export default class RTEditor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
    };
    this.setDomEditorRef = ref => this.domEditor = ref;
  }

  onEditorStateChange: Function = (editorState) => {
    this.setState({
      editorState,
    }, () => {
      this.props.sendResult(draftToHtml(convertToRaw(this.state.editorState.getCurrentContent())));
    });
  };

  componentWillReceiveProps(nextProps) {
    if(nextProps.reset) {
      this.reset();
    }
  }

  componentDidMount() {
    if(this.props.text) {
      const html = `${this.props.text}`;
      const contentBlock = htmlToDraft(html);
      if (contentBlock) {
        const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
        const editorState = EditorState.createWithContent(contentState);
        this.setState({ editorState, });
      }
    }

    this.domEditor.focusEditor();
  }

  reset = () => {
      let {editorState} = this.state;
      editorState = clearEditorContent(editorState);
      this.setState({ editorState });
  };

  render() {
    const { editorState } = this.state;
    return (
      <Editor
        ref={this.setDomEditorRef}
        editorState={editorState}
        wrapperClassName="rte-wrapper"
        editorClassName="rte-editor"
        onEditorStateChange={this.onEditorStateChange}
        toolbarCustomButtons={[this.props.UploadHandler]}
      />
    )
  }
}

我的父组件代码如下，

import React, { Component } from 'react'
import { addThreadPost } from '../../../api/thread-api'
import { isEmpty } from '../../../api/common-api'
import RTEditor from './Loadable'

export default class ThreadActivity extends Component {
    constructor(props) {
        super(props)
        this.state = {
            clearEditor: false,
            threadPost: ''
        }
    }

    setPost = (post) => {
        this.setState({ threadPost: post })
    }

    addThreadPost = () => {
        let postText = this.state.threadPost.replace(/<[^>]+>/g, '');
        if(!isEmpty(postText)) {
            addThreadPost(this.props.match.params.id_thread, this.state.threadPost, this.state.postAttachments).then(response => {
                this.setState({ 
                    clearEditor: true,
                    postAttachments: [],
                })
            });
        }
        else {
            alert("Please enter some text in box.");
        }
    }

    render() {
        return [
            <div className="commentbox-container">
                <div className="form-group">
                    <div className="form-control">
                        <RTEditor 
                            ref={node => { this.threadPost = node }} 
                            text={""} 
                            sendResult={this.setPost.bind(this)}
                            reset={this.state.clearEditor}
                        />
                        <button className="btn-add-post" onClick={this.addThreadPost}>Add Post</button>
                    </div>
                </div>
            </div>
        ]
    }
}

Answer 1

您的问题可能是，一旦您将 ThreadActivity 的 state.clearEditor 设置为 true，您就再也不会将其设置回 false。因此，每次组件收到 Prop 时，您的 this.reset() 都会被调用。顺便说一下，每次您尝试输入时都会出现这种情况，因为您正在调用 this.props.sendResult。

最简单的解决方法是确保在清除完成后将 state.clearEditor 改回 false。

添加到 ThreadActivity.js:

constructor(props) {
  ...
  this.completeClear = this.completeClear.bind(this);
}

...

completeClear = () => {
  this.setState({clearEditor: false});
}

render() {
  ...
  <RTEditor
   ...
   completeClear={this.completeClear}
  />
  ...
}

在 RTEditor.js 中:

reset = () => {
    let {editorState} = this.state;
    editorState = clearEditorContent(editorState);
    this.setState({ editorState });
    this.props.completeClear();
};