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

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

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

工作实例

​

​

Answer 2

尝试useEffect钩子，每当第二个参数数组中的变量发生变化时，它都会调用函数，在这个特定场景中，当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)}
        />
      </>
    );
}