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

我试图得到一个简单的撤销和重做按钮开始工作。到目前为止，我已经试着阅读了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')
);

从“React”导入React；
从“react dom”导入react dom；
从“草稿js”导入{Editor，EditorState}；
类MyEditor扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={editorState:editorState.createEmpty（）}；
this.onChange=（editorState）=>this.setState（{editorState}）；
}
onClick（）{
这是我的国家({
editorState:editorState.undo（editorState）
})
}
render（）{
返回(
解开
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

这是修复方法，我需要像这样正确地引用编辑器状态，然后根据Simon的回答进行重构：

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')
);

从“React”导入React；
从“react dom”导入react dom；
从“草稿js”导入{Editor，EditorState}；
类MyEditor扩展了React.Component{
建造师（道具）{
超级（道具）；
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（）{
返回(
解开
重做
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

这是修复方法，我需要像这样正确地引用编辑器状态，然后根据Simon的回答进行重构：

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')
);

从“React”导入React；
从“react dom”导入react dom；
从“草稿js”导入{Editor，EditorState}；
类MyEditor扩展了React.Component{
建造师（道具）{
超级（道具）；
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（）{
返回(
解开
重做
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

您已经找到了原因（您需要正确引用editorState变量），但我仍然想在途中告诉您：

您应该按如下方式更改

onClick

方法：

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

到

对于DraftJS，如果您试图通过

onChange

以外的方法更改编辑器状态，通常是“错误的做法”

如果您对编辑器状态进行任何更改，只需在完成后触发

onChange

另外，你知道JS插件的草稿吗？这是一个非常有用的DraftJS插件集合，还包括撤销/重做按钮

您已经找到了原因（您需要正确引用editorState变量），但我仍然想在途中告诉您：

您应该按如下方式更改

onClick

方法：

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

到

对于DraftJS，如果您试图通过

onChange

以外的方法更改编辑器状态，通常是“错误的做法”

如果您对编辑器状态进行任何更改，只需在完成后触发

onChange

另外，你知道JS插件的草稿吗？这是一个非常有用的DraftJS插件集合，还包括撤销/重做按钮

---

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

---

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

---

Hi@simon，我不理解你所做的重构，你能用我上面发布的代码提供一个例子吗？我会欣然接受这个答案。我也知道draftjs插件，谢谢：），但我有一个单独的菜单可以在另一个react容器中使用。我更新了我的答案，让它更清楚，我希望它有帮助！你做错了。检查我如何在编辑的答案中使用onChange方法。您需要直接将更改后的editorState作为参数传递给onChange，而不是像setstate（）中那样传递对象。是的，抱歉，只需sawPerfect，谢谢Simon。还更新了我自己的修复/回答和你的建议。嗨@simon，我不理解你所做的重构，你能用我上面发布的代码提供一个例子吗？我会欣然接受这个答案。我也知道draftjs插件，谢谢：），但我有一个单独的菜单可以在另一个react容器中使用。我更新了我的答案，让它更清楚，我希望它有帮助！你做错了。检查我如何在编辑的答案中使用onChange方法。您需要直接将更改后的editorState作为参数传递给onChange，而不是像setstate（）中那样传递对象。是的，抱歉，只需sawPerfect，谢谢Simon。我也用你的建议更新了我自己的修复/回答。我很惊讶这能起作用。难道你没有发现当编辑器失去焦点时，它的状态会发生变化（因为焦点已经移动到按钮上），所以撤销只是对焦点的变化进行操作？我发现只有在使用onMouseDown并调用event.preventDefault（）时，这种方法才有效。我很惊讶这种方法居然有效。难道你没有发现当编辑器失去焦点时，它的状态会发生变化（因为焦点已经移动到按钮上），所以撤销只是对焦点的变化进行操作？我发现只有在使用onMouseDown并调用event.preventDefault（）时，这种方法才有效