Javascript 在更改事件之前反应代码镜像

我使用的节点模块如下所示：

<CodeMirror 
  className={className} 
  value={this.state.code} 
  onBeforeChange={this.onBeforeChange} 
  onChange={this.onChange} 
  options={options}
/>

onBeforeChange(change) {
  console.log('calling beforeChange');
}

onChange(newCode) {
  this.setState({
    code: newCode
  });
}

---

事实证明，react codemirror不会公开

beforeChange

事件

然而，它确实如此。图书馆的开关为我解决了这个问题

我的最终回调代码：

onBeforeChange(cm, change, callOnChange) {

  const options = Object.assign({}, DEFAULT_OPTIONS, this.props.options)

  if (options.singleLine) {
    var after = change.text.join('').replace(/\n/g, '')
    change.update(change.from, change.to, [after])
  }

  callOnChange()
}

onChange(cm, change, code) {

  this.setState({ code })

  if (this.props.onChange) {
    this.props.onChange(code)
  }
}

本文作者。我无意中发现了你的问题，并想随后给出一个详细的答案，因为在这个问题上有一些突破性的变化。该组件现在根据不同的用例附带了

非受控

和

受控

变体。我看到您正在

onBeforeChange

回调中调用

setState

。在您的情况下，我建议利用受控组件本身

import {Controlled as CodeMirror} from 'react-codemirror2'

<CodeMirror
  value={this.state.value}
  options={options}
  onBeforeChange={(editor, data, value) => {
    this.setState({value}); // must be managed here
  }}
  onChange={(editor, metadata, value) => {
    // final value, no need to setState here
  }}
/>

import {UnControlled as CodeMirror} from 'react-codemirror2'

<CodeMirror
  value={value}
  options={options}
  onBeforeChange={(editor, data, value, next) => {
    // hook to do whatever
    next();
  }}
  onChange={(editor, metadata, value) => {
  }}
/>

但是，如果指定了

onBeforeChange

，则在这里，

onChange

将被推迟到调用

next

。否则，

onChange

将自动触发。重要的是要注意，对于

不受控制的

变量，编辑器总是会对输入更改做出反应-区别只在于是否调用了

onChange

这些变化是由于社区的需要而产生的，我鼓励你不要让任何事情如你所期望的那样起作用