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中有一些突破性的改变。 该组件现在随基于不同用例的UnControlled
和Controlled
变体一起提供。 我看到你正在onBeforeChange
callback中调用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
组件也有一个onBeforeChange
callback,但具有不同的行为,如…
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) } }