13

我见过的 Draft-js 演示（由 Facebook，基于 React 构建）都没有展示如何在提交后清除输入字段。例如，请参阅从 awesome-draft-js 链接到的代码笔，您提交的值在提交后仍保留在输入字段中。api中似乎也没有任何 功能可以做到这一点。我所做的就是像这样在按钮提交时创建一个新的空状态

onSubmit(){
this.setState({
   editorState: EditorState.createEmpty(),
})
}

但是，由于我在像这样加载编辑器时在构造函数中创建了一个空状态

  this.state = {
    editorState: EditorState.createEmpty(),
  };

我担心我可能没有以正确的方式进行操作，即先前的状态对象可能会成为内存泄漏。问题：在上述情况下重置状态的预期方式是什么（即按钮提交）

4

4 回答 4

31

不推荐使用 EditorState.createEmpty() 来清除编辑器的状态——你应该只在初始化时使用 createEmpty 。

重置编辑器内容的正确方法：

import { EditorState, ContentState } from 'draft-js';

const editorState = EditorState.push(this.state.editorState, ContentState.createFromText(''));
this.setState({ editorState });

@source：https ://github.com/draft-js-plugins/draft-js-plugins/blob/master/FAQ.md

于 2016-08-19T00:23:15.570 回答
5

@Vikram Mevasiya 的解决方案无法正确清除阻止列表样式

@Sahil 的解决方案与下一个输入上的光标混淆

我发现这是唯一可行的解​​决方案：

// https://github.com/jpuri/draftjs-utils/blob/master/js/block.js
const removeSelectedBlocksStyle = (editorState)  => {
    const newContentState = RichUtils.tryToRemoveBlockStyle(editorState);
    if (newContentState) {
        return EditorState.push(editorState, newContentState, 'change-block-type');
    }
    return editorState;
}

// https://github.com/jpuri/draftjs-utils/blob/master/js/block.js
export const getResetEditorState = (editorState) => {
    const blocks = editorState
        .getCurrentContent()
        .getBlockMap()
        .toList();
    const updatedSelection = editorState.getSelection().merge({
        anchorKey: blocks.first().get('key'),
        anchorOffset: 0,
        focusKey: blocks.last().get('key'),
        focusOffset: blocks.last().getLength(),
    });
    const newContentState = Modifier.removeRange(
        editorState.getCurrentContent(),
        updatedSelection,
        'forward'
    );

    const newState = EditorState.push(editorState, newContentState, 'remove-range');
    return removeSelectedBlocksStyle(newState)
}

它结合了https://github.com/jpuri/draftjs-utils提供的两个辅助函数。不想为此npm install使用整个包裹。它重置光标状态但保留阻止列表样式。这是通过应用程序删除的，removeSelectedBlocksStyle() 我无法相信这个成熟的库如何不提供单行重置功能。

于 2020-11-11T16:49:36.157 回答
2

试试这个

    let editorState = this.state.editorState
    let contentState = editorState.getCurrentContent()
    const firstBlock = contentState.getFirstBlock()
    const lastBlock = contentState.getLastBlock()
    const allSelected = new SelectionState({
        anchorKey: firstBlock.getKey(),
        anchorOffset: 1,
        focusKey: lastBlock.getKey(),
        focusOffset: lastBlock.getLength(),
        hasFocus: true
    })
    contentState = Modifier.removeRange(contentState, allSelected, 'backward')
    editorState = EditorState.push(editorState, contentState, 'remove-range')
    editorState = EditorState.forceSelection(contentState, contentState.getSelectionAfter())
    this.setState({editorState})
于 2019-02-21T06:52:25.800 回答
0 
const content = {
  entityMap: {},
  blocks:[
    { 
      key: "637gr",
      text: "",
      type:"unstyled",
      depth:0,
      inlineStyleRanges:[],
      entityRanges: [],
      data: {}
    }
  ]
};

  1. const [editorContent, setEditorContent] = useState(content);

  2. <Editor contentState={editorContent} />

contentState保存后道具可以setEditorContent用来重置编辑器

setEditorContent(content)
于 2021-07-16T23:53:46.447 回答