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

Question

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

尝试通过状态传递值，但没有运气。关于如何做到这一点的任何想法？

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

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

标签： reactjsace-editor

Answer 1

您的onChange函数不会更新状态。