React CodeMirror 不可编辑答案

【问题标题】：React CodeMirror is not editableReact CodeMirror 不可编辑
【发布时间】：2021-06-29 12:50:00
【问题描述】：

我正在使用 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;

不胜感激。

【问题讨论】：

标签： javascript node.js reactjs react-native codemirror

【解决方案1】：

ReactCodeMirror 有两个版本 - 受控和不受控。

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

【讨论】：

【解决方案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);
      }}
    />
  );
}

【讨论】：