react-codemirror beforeChange事件

Question

我正在使用react-codemirror节点模块,如下所示:

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

该change事件工作正常,但我似乎不能与挂钩beforeChange事件.谁知道我做错了什么？

我在课堂上声明了处理程序如下:

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

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

Answer 1

这里是react-codemirror2的作者.我偶然发现了你的问题并希望跟进一个详细的答案,因为3.x中有一些重大变化.该组件现在船舶与UnControlled和Controlled变异根据不同的使用情况.我看到你setState在onBeforeChange回调中打电话.在你的情况下,我建议利用受控组件......

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
  }}
/>

与对照变种,管理状态所需的value道具看到任何变化.

此外,该UnControlled组件也有一个onBeforeChange回调,但具有不同的行为......

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) => {
  }}
/>

但是,这onChange将延迟,直到被指定时next被调用onBeforeChange.如果没有,onChange无论如何都会开火.但值得注意的是,使用UnControlled变体时,编辑器将始终对输入更改做出反应 - 差异仅仅onChange是调用与否.

这些变化的灵感来自于社区的需求,如果任何事情没有按照您的预期发挥作用,我鼓励您提出问题.