如何从React JS中的代码镜像中获取值？

Question

我正在尝试从代码镜像输入字段获得值

import CodeMirror from "@uiw/react-codemirror";
import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
import { languages } from "@codemirror/language-data";

export default function Editor() {
    const [get, set] = useState("");
    console.log(get); {/* doesn't display anything */}
     
    return (
      <>
        <CodeMirror
          value={get}
          extensions={[
            markdown({ base: markdownLanguage, codeLanguages: languages }),
          ]}
          onInput={(e) => set(e.target.value)}
        />
      </>
    );
}

Answer 1

尝试useffect挂钩，它在第二个参数数组中的变量更改时，在此特定情况下，当get> get更改时，它会调用函数。

import CodeMirror from "@uiw/react-codemirror";
import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
import { languages } from "@codemirror/language-data";
import { useEffect } from "react";

export default function Editor() {
    const [get, set] = useState("");
    
    useEffect(() => {
       console.log(get) //gets called whenever get state changes
    }, [get])
     
    return (
      <>
        <CodeMirror
          value={get}
          extensions={[
            markdown({ base: markdownLanguage, codeLanguages: languages }),
          ]}
          onInput={(e) => set(e.target.value)}
        />
      </>
    );
}

Answer 2

onChange处理程序可以输出以下的值。

import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
import { languages } from "@codemirror/language-data";
import { useState } from "react";

export default function Editor() {
  const [get, set] = useState("");
  console.log(get);

  return (
    <>
      <CodeMirror
        value={get}
        extensions={[
          markdown({ base: markdownLanguage, codeLanguages: languages })
        ]}
        onChange={(value) => set(value)}
      />
    </>
  );
}

工作示例