Reactjs 单击获取代码镜像值时作出反应

我试图获得下面的代码，以便在单击按钮时显示CodeMirror onChange值，然后在“output”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>
    );
  }
}

import React，{Component}来自“React”；
从“react-codemirror2”导入{UnControlled as CodeMirror}；
导入“codemirror/mode/javascript/javascript”；
导入“codemirror/lib/codemirror.css”；
导出默认类代码扩展组件{
render（）{
返回(
{
console.log（值）；
}}
/>
运行代码
//价值应该在这里

);
}
}

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

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

导出默认类代码扩展组件{
陈述={
值：“”
}
render（）{
返回(
{
this.setState（{value}）；
}}
/>
运行代码
{this.state.value}

);
}
}

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

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

导出默认类代码扩展组件{
陈述={
值：“”
}
render（）{
返回(
{
this.setState（{value}）；
}}
/>
运行代码
{this.state.value}

);
}
}

您可以使用

状态

来维护您的值，并显示您状态的输出

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

类代码扩展组件{
建造师（道具）{
超级（道具）
此.state={
运行码：false，
outputText:'console.log（“Hello World”），
}
}
运行代码=（）=>{
this.setState（{runCode:true}）
}
render（）{
返回(
{
这是我的国家({
运行码：false，
outputText:value，
})
}}
/>
运行代码
{this.state.runCode&&this.state.outputText}
)
}
}

-点击按钮后追加输出

---

-输入时追加输出。

您可以使用

状态

来维护您的值，并显示您状态的输出

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

类代码扩展组件{
建造师（道具）{
超级（道具）
此.state={
运行码：false，
outputText:'console.log（“Hello World”），
}
}
运行代码=（）=>{
this.setState（{runCode:true}）
}
render（）{
返回(
{
这是我的国家({
运行码：false，
outputText:value，
})
}}
/>
运行代码
{this.state.runCode&&this.state.outputText}
)
}
}

-点击按钮后追加输出

-Outout在键入时追加