react-codemirror beforeChange事件

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

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

change事件工作正常,但我似乎无法与beforeChange事件挂钩。 任何人都知道我在做什么错了?

我已经在我的class级中宣布了处理程序如下:

 onBeforeChange(change) { console.log('calling beforeChange'); } onChange(newCode) { this.setState({ code: newCode }); } 

这里是react-codemirror2的作者。 我偶然发现了你的问题,并想跟进一个详细的答案,因为在3.x中有一些突破性的改变。 该组件现在随基于不同用例的UnControlledControlled变体一起提供。 我看到你正在onBeforeChangecallback中调用setState 。 在你的情况,我会build议利用受控组件这样…

 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道具上需要pipe理状态以查看任何更改。

此外, UnControlled组件也有一个onBeforeChangecallback,但具有不同的行为,如…

 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会不pipe。 需要注意的是,使用UnControlled变体时,编辑器将始终对input变化作出反应 – 如果调用onChange ,差异将会简单地变化。

这些变化是受到社区需求的启发,我鼓励你们开放一个问题,如果有什么事情不像你期望的那样工作的话。

事实certificatereact-codemirror不会暴露beforeChange事件。

但是, react-codemirror2呢 。 图书馆的一个开关为我修好了!

我最后的callback代码:

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