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属性中使用字符串文字。（react / no-string-refs），并与 this.refs 放入onChange函数中相同。

对此有任何想法吗？感谢您的帮助。

Answer 1

ref属性引用DOM节点。并可以通过以下代码进行访问：

int SYMBOL_NUMBER_LIMIT = 3;

int start()
{
    string COUNTED_SYMBOLS[]; ArrayResize( COUNTED_SYMBOLS, SYMBOL_NUMBER_LIMIT, 0 );

    for (  int s = 0; s <  SYMBOL_NUMBER_LIMIT; s++ ) COUNTED_SYMBOLS[s] = "";

    int  SYMBOLS_IN_TRADE_SO_FAR = 0;
    bool NEW_TRADE_PERMISSION    = True;
    int  ALL_POSITIONS           = OrdersTotal(); // PositionsTotal();

    if (  ALL_POSITIONS >  0 )
    {     
          for (  int index = 0; index <  ALL_POSITIONS; index++ )
          {
                 string THIS_SYMBOL = OrderSymbol(); // PositionGetSymbol( index );
                 bool   Symbol_already_counted = False;

                 for (  int i = 0; i < SYMBOL_NUMBER_LIMIT; i++ )
                 {
                        if (  COUNTED_SYMBOLS[i] == THIS_SYMBOL )
                        {
                              Symbol_already_counted = True;
                              break;
                        }

                        if (  Symbol_already_counted ) continue;
                        else
                        {     
                              SYMBOLS_IN_TRADE_SO_FAR++;
                           // if (  SYMBOLS_IN_TRADE_SO_FAR >= SYMBOL_NUMBER_LIMIT )
                              if (  SYMBOLS_IN_TRADE_SO_FAR == SYMBOL_NUMBER_LIMIT )
                              {     
                                    NEW_TRADE_PERMISSION = False;
                                    break;
                              }
                              for (  int j = 0; j <  SYMBOL_NUMBER_LIMIT; j++ )
                                     if (  COUNTED_SYMBOLS[j] == "" )
                                     {
                                           COUNTED_SYMBOLS[j] = THIS_SYMBOL;
                                           break;
                                     }
                        }
                 }
          }
    }
} // <-------------------------------------THIS ONE WAS MISSING, COMPILER WAS NOT HAPPY

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

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

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

1 个答案: