React CodeMirror 不可编辑

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 - Controlled 和 UnControlled。

在您的示例中，您使用了 Controlled 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);
      }}
    />
  );
}

React CodeMirror 不可编辑

React CodeMirror is not editable

javascript

node.js

codemirror

reactjs

react-native