我正在使用react-codemirror节点模块,如下所示:
<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
});
}
答案 0 :(得分:5)
react-codemirror2的作者。我偶然发现了你的问题并希望跟进详细的答案,因为3.x中有一些重大变化。该组件现在附带了基于不同用例的UnControlled
和Controlled
变体。我看到您在setState
回调中呼叫onBeforeChange
。在你的情况下,我建议利用受控组件......
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
道具上管理状态为 required 以查看任何更改。
此外,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) => {
}}
/>
但是,如果指定onChange
,next
将被推迟,直到onBeforeChange
被调用为止。如果没有,onChange
无论如何都会开火。但值得注意的是,使用UnControlled
变体时,编辑器将始终对输入更改做出反应 - 差异只是在调用onChange
时。
这些变化的灵感来自于社区的需求,我鼓励您open an issue如果任何事情没有按照您的预期运作。
答案 1 :(得分:0)
事实证明,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)
}
}