[英]react-codemirror beforeChange event
I am using react-codemirror node module as follows: 我正在使用react-codemirror节点模块,如下所示:
<CodeMirror
className={className}
value={this.state.code}
onBeforeChange={this.onBeforeChange}
onChange={this.onChange}
options={options}
/>
The change
event works fine, but I can't seem to hook up with the beforeChange
event. change
事件工作正常,但我似乎无法与beforeChange
事件挂钩。 Anyone know what I am doing wrong? 谁知道我做错了什么?
I have declared handlers in my class as follows: 我在课堂上声明了处理程序如下:
onBeforeChange(change) {
console.log('calling beforeChange');
}
onChange(newCode) {
this.setState({
code: newCode
});
}
Author of react-codemirror2 here. 这里是react-codemirror2的作者。 I stumbled upon your question and wanted to follow up with a detailed answer as there are some breaking changes in 3.x .
我偶然发现了你的问题并希望跟进一个详细的答案,因为3.x中有一些重大变化。 The component now ships with an
UnControlled
and Controlled
variant based on different use cases. 该组件现在附带了基于不同用例的
UnControlled
和Controlled
变体。 I see you are calling setState
within the onBeforeChange
callback. 我看到你在
onBeforeChange
回调中调用了setState
。 In your case, I'd suggest leveraging the controlled component as such... 在你的情况下,我建议利用受控组件......
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
}}
/>
With the controlled variant, managing state is required on the value
prop to see any changes. 使用受控变量, 需要在
value
prop上管理状态以查看任何更改。
Additionally, the UnControlled
component also has an onBeforeChange
callback as well, yet with different behavior as such... 此外,
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) => {
}}
/>
Here however, onChange
will be deferred until next
is invoked if onBeforeChange
is specified. 然而在这里,
onChange
将被推迟到next
如果调用onBeforeChange
指定。 If not, onChange
will fire regardless. 如果没有,
onChange
无论如何都会开火。 Important to note, though, with the UnControlled
variant, the editor will always react to input changes - the difference will simply be if onChange
is called or not. 但值得注意的是,使用
UnControlled
变体时,编辑器将始终对输入更改做出反应 - 差异只是在调用onChange
。
These changes were inspired due to the needs of the community and I encourage you to open an issue should anything not be working as you expect. 这些变化的灵感来自于社区的需求,如果任何事情没有按照您的预期发挥作用,我鼓励您提出问题 。
It turns out react-codemirror does NOT expose the beforeChange
event. 事实证明react-codemirror不公开
beforeChange
事件。
However, react-codemirror2 does. 但是, react-codemirror2可以。 A switch of library fixed this for me!
图书馆的交换机为我修好了!
My final callback code: 我的最终回调代码:
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)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.