如何在点击时显示 React Ace Editor 的价值支柱？

Question

我希望显示来自 React Ace 编辑器的 value 道具。暂时只看console.log。

我不确定如何访问它并在单击 "see code" 按钮时显示它。

这是我目前正在处理的代码：

import React, { Component } from "react";
import AceEditor from "react-ace";

import "ace-builds/src-noconflict/mode-javascript";
import "ace-builds/src-noconflict/theme-github";

function onChange(newValue) {
  console.log("change", newValue);
}

class Code extends Component {
  constructor(props) {
    super(props);
    this.state = { code: `console.log("Hello World")` };
  }

  runCode = () => {
    console.log(this.props.aceEditor.value);
  };

  render() {
    return (
      <>
        <AceEditor
          mode="javascript"
          theme="github"
          fontSize={16}
          value={this.state.code}
          onChange={onChange}
          name="UNIQUE_ID_OF_DIV"
          editorProps={{ $blockScrolling: true }}
        />
        <div>
          <h2>Controls:</h2>
          <button onClick={this.runCode}>see code</button>
        </div>
      </>
    );
  }
}

export default Code;

Answer 1

constructor(props) {
 super(props);
 this.state = { code: `console.log("Hello World")` };
 this.runCode = this.runCode.bind(this);
}

您需要将 runCode 函数绑定到您的 class。您可以在构造函数中执行此操作，如上所示。

如何在点击时显示 React Ace Editor 的价值支柱？

How to display value prop of react Ace Editor onClick?

javascript

ace-editor

reactjs