背景介绍

某我的项目须要应用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中应用。