在ReactJS中使用AceEditor知道光标在文本中的位置

Question

我正在创建一个代码编辑器，现在我想知道光标在 Ace 编辑器文本中的位置是什么。

这是代码编辑器组件的代码：

import React, {Component} from 'react';
import AceEditor from 'react-ace';
import 'brace/mode/javascript';
import 'brace/theme/monokai';
import 'brace/ext/language_tools';
class EditorCodeEditor extends Component {
onChange = e => {
// Here  I want show for console the position of cursor
Something like this? -> console.log(this.refs.ace.editor.focus);
};
render() {
return (
<div>
<AceEditor
mode="javascript"
theme="monokai"
name="blah2"
onChange={this.onChange}
fontSize={14}
showPrintMargin={true}
showGutter={true}
highlightActiveLine={true}
value="I AM AN EDITOR"
ref='ace'
focus={true}
cursorStart={1}
editorProps={{$blockScrolling: true}}
style={{width: '100%', height: '400px'}}
setOptions={{
enableBasicAutocompletion: false,
enableLiveAutocompletion: true,
enableSnippets: true,
showLineNumbers: true,
tabSize: 2
}} />
</div>
);
}
}
export default EditorCodeEditor;

问题是当我在 AceEditor 标签中使用ref='ace'时，它会返回 错误：不推荐在 ref 属性中使用字符串文本。 (反应/无字符串引用(与此相同.refs进入 onChange 函数。

对此有什么想法吗？感谢您的帮助。

Answer 1

ref prop 指的是 DOM 节点。并且可以通过以下代码访问：

ref={c => { this.ace = c; }}

为了获取光标的位置，AceEditor 有一个可以使用的 onCursorChange 道具。

onCursorChange(selection) {
const cursorPosition = selection.getCursor();
}