React不可编辑

Question

我正在使用CodeMirror来作出反应。我指的是文档，但我无法使其可编辑。

下面是代码：

import { Controlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import 'codemirror/mode/javascript/javascript';

const ResponseMappings = () => {
  const [code, setCode] = React.useState('{ name: "Karan" }');
  return (
    <CodeMirror
      value={code}
      options={{
        mode: 'javascript',
        theme: 'material',
        lineNumbers: true,
        readOnly: false,
      }}
      onChange={(editor, data, value) => setCode(value)}
    />
  );
};

export default ResponseMappings;

会很感激你的帮助。

Answer 1

有两个版本的ReactCodeMirror控制和UnControlled。

在您的示例中，您使用了受控ReactCodeMirror。这意味着您需要通过状态更改代码，并且需要在onBeforeChange事件中这样做。就像这样：

import { Controlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import 'codemirror/mode/javascript/javascript';

const ResponseMappings = () => {
  const [code, setCode] = React.useState('{ name: "Karan" }');
  return (
    <CodeMirror
      value={code}
      options={{
        mode: 'javascript',
        theme: 'material',
        lineNumbers: true,
        readOnly: false,
      }}
      onBeforeChange={(editor, data, value) => {
        setCode(value);
      }}
    />
  );
};

Answer 2

import CodeMirror from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';

export default function App() {
  return (
    <CodeMirror
      value="console.log('hello world!');"
      height="200px"
      extensions={[javascript({ jsx: true })]}
      onChange={(value, viewUpdate) => {
        console.log('value:', value);
      }}
    />
  );
}