Ace编辑器带有ReactJS-undo功能

Question

我在React中使用Ace编辑器(https://github.com/securingsincity/react-ace，版本：8.0.0(

我已经设法添加了一个撤消按钮，但在一个新的编辑器实例上撤消就是擦除整个文档。

到目前为止我的代码：

class AceEditor extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.editor = React.createRef();
  }
  componentDidMount() {
    this.setState({
      code: "Test text"
    })
  }
  render() {
    const {code} = this.state;
    return (
      <div>
        <Button onClick={() => {
          this.editor.current.editor.undo()
        }}/>
        <AceEditor
          ref={this.editor}
          value={code}
          // more props
          onLoad={editor => {
            const session = editor.getSession();
            const undoManager = session.getUndoManager();
            undoManager.reset();
            session.setUndoManager(undoManager);
          }}
        />
      </div>
    );
  }
}

我缺少什么，有什么解决办法吗？

Answer 1

发生这种情况是因为在处理value={code}之前调用了onload，一个巧妙的解决方法是：

onLoad={editor => {
    editor.once("change", function() {
        editor.session.getUndoManager().reset();
    });
}}

https://codesandbox.io/s/sharp-kalam-yen89