3

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

2 回答 2

11

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被调用。

这些更改的灵感来自于社区的需求，我鼓励您打开一个问题，如果任何事情都没有按您的预期工作。

于 2017-10-18T18:10:05.667 回答
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)
  }
}
于 2017-09-12T13:40:37.013 回答