关于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中应用。