DraftJS 触发内容更改焦点？

Question

我在页面和save按钮上有一个编辑器。我希望save按钮仅在有更改时出现（自上次保存以来）。因此，当您保存时，我设置this.setState({hasChanges: false})并在onChange功能中设置hasChanges为true.

这一切正常。问题是编辑器将onChange在编辑器获得焦点时触发事件（但内容尚未更改）。而且，根据他们的文档，这是预期的行为

组件内的事件侦听器将观察焦点更改并按预期通过 onChange 传播它们，因此状态和 DOM 将保持正确同步。

有没有办法知道内容是否在onChange方法内部发生了变化，或者只有选择发生了变化？

Answer 1

我今天早些时候在 github 上发布了这个问题的答案，但我也会在这里添加它以供将来参考：

您是对的，每次editorState更改时都会调用 onChange 。并且由于editorState包含selectionState和contentState，因此在进行内容编辑和选择/焦点更改时都会更改。

如果您想知道触发该onChange方法的更改是在contentState还是在 中selectionState，您可以将它们与旧值进行比较：

function onChange(newState) {
  const currentContentState = this.state.editorState.getCurrentContent()
  const newContentState = newState.getCurrentContent()

  if (currentContentState !== newContentState) {
    // There was a change in the content  
  } else {
    // The change was triggered by a change in focus/selection
  }
}

现在，如果您知道更改在 中contentState，您可以通过调用newState.getLastChangeType()获取更多信息。它应该返回这些值中的任何一个（除非您或您添加的某些插件创建了新的更改类型）。