如何在單擊按鈕時從 react ace 編輯器中獲取新值

Question

我試圖在單擊按鈕時提醒 ace 編輯器的最終值。 我知道 Ace Editor 有一個 onChange 事件，只是不確定如何將該值放入我的handleClick函數中。

這是我當前的代碼：

import ReactAce from "react-ace";
import React from "react";

import "ace-builds/src-noconflict/mode-python";
import "ace-builds/src-noconflict/theme-twilight";

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

function handleClick() {
  alert();
}

function CodeEditor(props) {
  return (
    <>
      <ReactAce
        value={props.value}
        mode="python"
        theme="twilight"
        showPrintMargin={false}
        setReadOnly={false}
        setValue={props.value}
        fontSize={18}
        style={{
          height: "620px",
          width: "100%",
        }}
        onChange={onChange}
      />
      <button onClick={handleClick}>Run Code</button>
    </>
  );
}
export default CodeEditor;

Answer 1

您可以使用 useState 鈎子來管理文本的狀態。

function CodeEditor(props) {
  // save the state here 
  const [ text, setText ] = useState('')
  const handleClick = () => {
    alert(text)
  }
  return (
    <>
      <ReactAce
        value={props.value}
        mode="python"
        theme="twilight"
        showPrintMargin={false}
        setReadOnly={false}
        setValue={props.value}
        fontSize={18}
        style={{
          height: "620px",
          width: "100%",
        }}
        // set the state when the value changes 
        onChange={(e) => setText(e.target.value)}
      />
      <button onClick={() => handleClick()}>Run Code</button>
    </>