关于react.js:React实现复制代码块到codeMirror代码编辑器中

背景介绍

某我的项目须要应用 React 实现点击右侧的参数列表后，将参数复制到代码编辑区中，实现参数或者代码块的疾速输出。具体的实现成果如下图所示

筹备工作

1. 装置 codemirror，react-codemirror2

   npm install react-codemirror2 codemirror --save

装置阐明

引入组件

import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import {UnControlled as CodeMirror} from 'react-codemirror2';
require('codemirror/mode/shell/shell');

实现代码

<CodeMirror
                    value={commandLine}
                    editorDidMount={editor => {this.instance = editor}}
                    options={{
                      mode: 'shell',
                      theme: 'material',
                      lineNumbers: true,
                      autofocus: true,// 主动获取焦点
                      styleActiveLine: true,// 光标代码高亮
                      smartIndent: true,  // 主动缩进
                      start: true,
                      lineWrapping: true,
                      foldGutter: true,
                    }}
                    onChange={(editor, data, value) => {
                      this.setState({commandLine: value,})
                    }}
                  />

handleParamCopy = (param) => {const pos1 = this.instance.getCursor();
    const pos2 = {
      line: pos1.line,  // 行号
      ch: pos1.ch // 光标地位
    }
    const insertValue = "${" + param + "}";
    this.instance.replaceRange(insertValue, pos2);
  }

以上代码的关键点为

editorDidMount={editor => {this.instance = editor}}

通过 editorDidMount 将 CodeMirror 的 ref 取得，而后就能够在 handleParamCopy 函数中应用 CodeMirror 的各种办法。这种办法也实用于其余老的非控组件在 React 中应用。