使用 Draftjs 的简单撤消和重做按钮答案

【问题标题】：Simple undo and redo button with Draftjs使用 Draftjs 的简单撤消和重做按钮
【发布时间】：2017-07-21 12:38:40
【问题描述】：

我正在尝试让一个简单的撤消和重做按钮开始工作。到目前为止，我已经尝试通读 Draftjs 网站上的文档，但感觉很神秘，并且没有我正在尝试做的示例。

这是我到目前为止所做的尝试，单击撤消它什么也不做。不知道我错过了什么。提前致谢。

import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }

  onClick() {
    this.setState({
      editorState: EditorState.undo(editorState)
    })
  }

  render() {
    return (
      <div>
      <button onClick={this.onClick.bind(this)}>undo</button>
        <Editor editorState={this.state.editorState} onChange={this.onChange} />
        </div>
    );
  }
}

ReactDOM.render(
  <MyEditor />,
  document.getElementById('root')
);

【问题讨论】：

标签： javascript reactjs rich-text-editor draftjs

【解决方案1】：

你已经找到了原因（你需要正确引用 editorState 变量），但我还是想在途中给你这个：

你应该改变你的onClick方法如下：

onClick() {
  this.setState({
    editorState: EditorState.undo(editorState)
  })
}

到

onClick() {
  this.onChange(EditorState.undo(this.state.editorState));
}

对于 DraftJS，如果您尝试通过 onChange 以外的方法更改 editorState，通常是“不好的做法”。

如果您对 editorState 进行任何更改，只需在完成后触发 onChange。

另外，你知道 Draft JS 插件吗？这是 DraftJS 非常有用的插件的精彩集合，还包括撤消/重做按钮！

https://www.draft-js-plugins.com/

【讨论】：

嗨@simon，我不明白你所做的重构，你能提供一个使用我上面发布的代码的例子吗？然后我会很乐意接受这个答案。我也知道draftjs插件谢谢:)，但我有一个单独的菜单可以在另一个反应容器中使用。
我更新了我的答案以使其更加清晰，希望对您有所帮助！
你做错了。检查我如何在我编辑的答案中使用 onChange 方法。您需要直接将更改后的 editorState 作为参数传递给 onChange，而不是像 setstate() 中那样传入对象
是的，抱歉，刚刚看到
完美，谢谢西蒙。还根据您的建议更新了我自己的修复/答案。

【解决方案2】：

这是修复，我需要像这样正确引用编辑器状态，然后我根据西蒙的回答重构：

import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }

  onUndo() {
    this.onChange(EditorState.undo(this.state.editorState));
  }

  onRedo() {
    this.onChange(EditorState.redo(this.state.editorState));
  }

  render() {
    return (
      <div>
      <button onClick={this.onUndo.bind(this)}>undo</button>
      <button onClick={this.onRedo.bind(this)}>Redo</button>
        <Editor editorState={this.state.editorState} onChange={this.onChange} />
        </div>
    );
  }
}

ReactDOM.render(
  <MyEditor />,
  document.getElementById('root')
);

【讨论】：

我很惊讶这行得通。你没有发现编辑器失去焦点时状态会发生变化（因为焦点已经移动到按钮上），所以撤消只是对焦点变化进行操作？我发现这仅在您使用 onMouseDown 并调用 event.preventDefault() 时才有效

【解决方案3】：

您可以轻松使用草稿团队提供的撤消/重做插件

check it out please

【讨论】：