Reactjs 在单击按钮时获取代码编辑器的值

我只是尝试在用户单击“查看代码”按钮时将所有代码编辑器的代码显示到控制台

试图通过州政府传递值，但没有运气。关于如何实现这一点有什么想法吗

以下是我到目前为止得到的代码：

import React from "react";
import ReactDOM from "react-dom";
import AceEditor from "react-ace";

import "ace-builds/src-noconflict/mode-javascript";
import "ace-builds/src-noconflict/theme-monokai";
import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    alert("A code is: " + this.state.value);
    event.preventDefault();
  }

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

    return (
      <div className="App">
        <p>Ace Code Editor</p>
        <AceEditor
          value={`// Creating a const
const hello = "Hello World";
// Console log the variable above on the next line:
`}
          mode="javascript"
          theme="monokai"
          name="UNIQUE_ID_OF_DIV"
          fontSize={16}
          onChange={onChange}
          editorProps={{ $blockScrolling: true }}
        />
        <button onClick={this.handleSubmit}>See Code</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

从“React”导入React；
从“react dom”导入react dom；
从“反应ace”导入AceEditor；
导入“ace构建/src noconflict/mode javascript”；
导入“ace构建/src noconflict/theme monokai”；
导入“/styles.css”；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={value:：}；
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleSubmit（事件）{
警报（“代码为：“+this.state.value”）；
event.preventDefault（）；
}
render（）{
函数onChange（codeValue）{
console.log（“更改”，代码值）；
}
返回(
Ace代码编辑器

参见代码
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

您的

onChange

函数不会更新状态。

为编辑器元素添加一个引用

<AceEditor ref="mainEditor"

var value = this.refs.mainEditor.editor.getValue();