我正在使用 react-codemirror Node 模块如下:
<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
});
}
最佳答案
作者 react-codemirror2这里。我无意中发现了你的问题,并想跟进一个详细的答案,因为 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
变体,编辑器将始终对输入更改使用react - 区别仅在于 onChange
是否被调用。
这些更改是由于社区的需求而受到启发的,我鼓励您 open an issue如果有任何事情不能按您预期的那样工作。
关于javascript - react-codemirror beforeChange 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46176827/