Javascript 在ReactJS中使用AceEditor了解光标在文本中的位置

我正在创建一个代码编辑器，现在我想知道光标在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;

import React，{Component}来自'React'；
从“react ace”导入AceEditor；
导入'brace/mode/javascript'；
导入“brace/theme/monokai”；
导入“大括号/ext/language_工具”；
类EditorCodeEditor扩展组件{
onChange=e=>{
//这里我想为控制台显示光标的位置
类似这样的内容？->console.log（this.refs.ace.editor.focus）；
};
render（）{
返回(
);
}
}
导出默认编辑器或代码编辑器；

问题是当我在AceEditor标签中使用ref='ace'时，它返回 错误：不推荐在ref属性中使用字符串文本。 （react/no string refs）和this.refs-into-onChange函数相同

---

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

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

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

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

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

---

请尝试

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

谢谢，这是可以接受的，但是我应该如何在console.log中调用它？就像

this.ace.focus（）

返回一个未定义的值。我不知道原因是什么。应该在

设置此.ace

之前安装组件。你让我开心了。这正是我需要的。非常感谢你！