React 富文本编辑器 - 在 ENTER 上清除状态答案

【问题标题】：React Rich Text Editor - Clear state on ENTERReact 富文本编辑器 - 在 ENTER 上清除状态
【发布时间】：2019-10-10 16:04:42
【问题描述】：

我想在按下回车键时清除 React 富文本编辑器 (https://github.com/sstur/react-rte) 的状态。

我的状态是这样的：

state = {
    value: RichTextEditor.createEmptyValue()
}

RichTextEditorcomponent 提供了 handleReturn 属性。因此，我实现了以下handleReturn 函数：

handleReturn = () => {this.setState(prevState => ({
      ...prevState,
      value: RichTextEditor.createValueFromString("", "html")
    }));
}

当我从 RichTextEditor 本身外部的按钮触发 handleReturn 函数时，它可以正常工作并且状态（和文本输入区域）被正确清除。但是，当从 enter 键触发相同的 handleReturn 时，它不会清除状态；但我可以看到 handleReturn 函数被正确触发。我将函数传递给组件，如下所示：

<RichTextEditor handleReturn={this.handleReturn} value={this.state.value}
          onChange={this.onChange}/>

感谢任何帮助。谢谢！

更新：我最终直接实现了底层 draft.js 库 (https://draftjs.org/)。这是一个非常顺利的过程，它通过绕过react-rte 解决了这个问题。因此，如果有可能，建议您切换。

【问题讨论】：

标签： reactjs rich-text-editor enter rte

【解决方案1】：

这可以帮助，只是重置输入有点长，但它有效

handleReturn = () => {
  let {editorState} = this.state;
  let contentState = editorState.getCurrentContent();
  const firstBlock = contentState.getFirstBlock();
  const lastBlock = contentState.getLastBlock();
  const allSelected = new SelectionState({
    anchorKey: firstBlock.getKey(),
    anchorOffset: 0,
    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});

【讨论】：