在 React.js 中添加代码输入

在 React.js 中，有多种方法可以添加代码输入。下面是一些常用的方法:

1. 使用 <textarea> 元素

可以使用 React 中的 <textarea> 元素来创建一个多行输入框。可以使用 onChange 事件来捕获用户输入，以便更新组件的状态。

import React, { useState } from 'react';

function CodeInput() {
  const [code, setCode] = useState('');

  function handleChange(event) {
    setCode(event.target.value);
  }

  return (
    <textarea value={code} onChange={handleChange} />
  );
}

2. 使用 react-codemirror2 库

react-codemirror2 是一个基于 CodeMirror 的 React 组件。CodeMirror 是一个功能强大的代码编辑器，支持语法高亮、代码补全、代码折叠等功能。

可以使用 react-codemirror2 来创建一个 CodeMirror 编辑器，并使用 onChange 事件来捕获用户输入。

首先需要安装 react-codemirror2：

npm install --save react-codemirror2 codemirror

然后在组件中引入并使用它：

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

function CodeInput() {
  const [code, setCode] = useState('');

  function handleChange(editor, data, value) {
    setCode(value);
  }

  return (
    <CodeMirror
      value={code}
      options={{
        mode: 'javascript',
        theme: 'material',
        lineNumbers: true,
      }}
      onBeforeChange={handleChange}
    />
  );
}

3. 使用 react-ace 库

react-ace 是另一个基于 Ace 编辑器的 React 组件。Ace 是一个功能强大的代码编辑器，支持语法高亮、代码补全、代码折叠等功能。

可以使用 react-ace 来创建一个 Ace 编辑器，并使用 onChange 事件来捕获用户输入。

首先需要安装 react-ace：

npm install --save react-ace brace

然后在组件中引入并使用它：

import React, { useState } from 'react';
import AceEditor from 'react-ace';
import 'brace/mode/javascript';
import 'brace/theme/github';

function CodeInput() {
  const [code, setCode] = useState('');

  function handleChange(value) {
    setCode(value);
  }

  return (
    <AceEditor
      value={code}
      mode="javascript"
      theme="github"
      onChange={handleChange}
      name="code-editor"
      editorProps={{ $blockScrolling: true }}
      height="300px"
      width="100%"
    />
  );
}

以上就是几种在 React.js 中添加代码输入的方法。可以根据需求选择合适的方法来实现。