React 获取代码镜像值 onClick答案

【问题标题】：React get codemirror value onClickReact 获取代码镜像值 onClick
【发布时间】：2019-07-14 04:01:06
【问题描述】：

我正在尝试获取以下代码以在单击按钮时显示 CodeMirror onChange 值，然后在“输出”div 中显示该值。

我对反应还很陌生，所以不确定是否最好通过状态传递值，或者是否有更简单的方法。

到目前为止，这是我的代码：

import React, { Component } from "react";
import { UnControlled as CodeMirror } from "react-codemirror2";
import "codemirror/mode/javascript/javascript";
import "codemirror/lib/codemirror.css";

export default class Code extends Component {
  render() {
    return (
      <div>
        <CodeMirror
          value='console.log("Hello World")'
          options={{
            mode: "javascript",
            lineNumbers: true
          }}
          onChange={(editor, data, value) => {
            console.log(value);
          }}
        />
        <button onClick={}>run code</button>

        <div className="Output">
          <p>// Value should go here</p>
        </div>
      </div>
    );
  }
}

【问题讨论】：

标签： reactjs codemirror react-codemirror

【解决方案1】：

您可以使用state 来维护您的价值观，并显示您所在州的输出，

class Code extends Component {
  constructor(props) {
    super(props)
    this.state = {
      runCode: false,
      outputText: 'console.log("Hello World")',
    }
  }
  runCode = () => {
    this.setState({runCode: true})
  }
  render() {
    return (
      <div>
        <CodeMirror
          value={this.state.outputText}
          options={{
            mode: 'javascript',
            lineNumbers: true,
          }}
          onChange={(editor, data, value) => {
            this.setState({
              runCode: false,
              outputText: value,
            })
          }}
        />
        <button onClick={this.runCode}>run code</button>

        <div className="Output">
          <pre>{this.state.runCode && this.state.outputText}</pre>
        </div>
      </div>
    )
  }
}

Demo - 单击按钮时附加输出。

Demo1 - 输入时附加输出。

【讨论】：

【解决方案2】：

在这种情况下你需要添加一个状态：

export default class Code extends Component {
    state={
       value: ''
     }
  render() {
    return (
      <div>
        <CodeMirror
          value='console.log("Hello World")'
          options={{
            mode: "javascript",
            lineNumbers: true
          }}
          onChange={(editor, data, value) => {
            this.setState({value});
          }}
        />
        <button onClick={}>run code</button>

        <div className="Output">
          <p>{this.state.value}</p>
        </div>
      </div>
    );
  }
}

【讨论】：