react-codemirror beforeChange事件

时间:2017-09-12 12:48:55

标签: javascript node.js reactjs codemirror react-codemirror

我正在使用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
  });
}

2 个答案:

答案 0 :(得分:5)

react-codemirror2的作者。我偶然发现了你的问题并希望跟进详细的答案,因为3.x中有一些重大变化。该组件现在附带了基于不同用例的UnControlledControlled变体。我看到您在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道具上管理状态为 required 以查看任何更改。

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

但是,如果指定onChangenext将被推迟,直到onBeforeChange被调用为止。如果没有,onChange无论如何都会开火。但值得注意的是,使用UnControlled变体时,编辑器将始终对输入更改做出反应 - 差异只是在调用onChange时。

这些变化的灵感来自于社区的需求,我鼓励您open an issue如果任何事情没有按照您的预期运作。

答案 1 :(得分:0)

事实证明,react-codemirror不会公开beforeChange事件。

然而,react-codemirror2确实如此。图书馆的一个开关为我修好了这个!

我的最终回调代码:

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