react-codemirror beforeChange 事件

Question

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

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

change event works fine, but I can't seem to hook up with the beforeChange 事件。有人知道我做错了什么吗？

我在 class 中声明了如下处理程序：

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

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

Answer 1

结果是 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)
  }
}

Answer 2

react-codemirror2 here. I stumbled upon your question and wanted to follow up with a detailed answer as there are some breaking changes in 3.x 的作者。该组件现在根据不同的用例附带 UnControlled 和 Controlled 变体。我看到您在 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
  }}
/>

对于受控变体，需要在 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) => {
  }}
/>

但是，如果指定了 onBeforeChange，onChange 将延迟到 next 被调用。如果不是， onChange 将无论如何都会触发。不过，需要注意的重要一点是，对于 UnControlled 变体，编辑器将始终对输入更改做出反应 - 区别仅在于是否调用 onChange。

这些更改是由于社区的需要而受到启发的，我鼓励您 open an issue 如果任何事情没有按您预期的那样工作。

react-codemirror beforeChange 事件

react-codemirror beforeChange event

javascript

node.js

codemirror

reactjs

react-codemirror