Question

我正在尝试使用一个简单的撤消和重做按钮。到目前为止，我已经尝试阅读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')
);

Answer 1

这是修复，我需要像这样正确引用editorstate，然后根据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')
);

Answer 2

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

您应该按照以下方式更改onClick方法：

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

到

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

对于DraftJS，通常是＆＃34;不良做法＆＃34;如果您尝试通过onChange以外的方法更改editorState。

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

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

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

Answer 3

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

check it out please

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

3 个答案: