reactjs - React 获取代码镜像值 onClick

Question

我试图获取下面的代码以在单击按钮时显示 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>
    );
  }
}

Answer 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>
    )
  }
}

演示- 单击按钮时附加输出。

Demo1 - 输入时附加输出。

Answer 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>
    );
  }
}