如何在 React.js 中添加代码输入?

react jsjavascript libraryfront end technology更新于 2024/12/7 1:48:17

我们可以在 React.js 中添加代码输入，方法是创建一个组件来渲染输入字段并处理用户输入。为此，我们可以使用内置的 React Hook(例如 useState)来管理输入值并处理更改。此外，我们还可以使用事件处理程序来处理用户输入并相应地更新输入值。首先，让我们了解一下什么是 ReactJS，并分析 React Hook"useState"在代码中的用法。

ReactJS

React 是一个用于构建用户界面的 JavaScript 库。它可以轻松创建交互式 UI。为应用程序中的每个状态设计简单的视图，当数据发生变化时，React 会高效地更新并渲染正确的组件。您还可以构建封装的组件来管理自身的状态，然后将它们组合起来以创建复杂的 UI。

无论小型还是大型复杂应用程序，都可以使用 ReactJS 创建。它提供了一套基础而可靠的功能，可帮助您快速构建 Web 应用程序。它易于掌握，无论是现代应用程序还是传统应用程序，并且是一种更快速的功能编码方法。React 提供了大量现成的组件。

UseState 钩子

useState 是 React 中的一个钩子，允许您向功能组件添加状态。它返回一个包含两个元素的数组:当前状态值和一个用于更新状态的函数。组件首次调用 useState 时，它会接收初始值，然后可以使用返回的函数更新状态，从而导致组件重新渲染。

设置 React 应用

首先运行以下命令 -

npx create-react-app code-input
cd code-input
npm start

方法

创建一个状态变量来保存代码输入 -

const [code, setCode] = useState("");

在 JSX 中添加一个 textarea 元素 -

<textarea onChange={(e) => setCode(e.target.value)} value={code}/>

这将允许用户在文本区域中输入内容并更新代码状态变量。

要显示代码输入，您可以使用 pre 或 code 元素 -

<pre>{code}</pre>

您还可以添加一个按钮来清除代码输入并重置状态 -

<button onclick="{()" ==""> setCode("")}>Clear

示例

创建一个组件 CodeInput.js 并将以下代码粘贴到其中 -

import React, { useState } from "react";
function CodeInput() {
   const [code, setCode] = useState("");
   function handleSubmit(code) {
      console.log("Submitting code: ", code);
      // Add your code submission logic here
   }
return (
   <div style = {{ background: '#555', padding: '60px 25px' }}>
      <textarea onChange={(e) => setCode(e.target.value)} value={code} />
      <pre>{code}</pre>
      <button onClick={() => setCode("")}>Clear</button>
      <button onClick={() => handleSubmit(code)}>Submit</button>
   </div>
);
}
export default CodeInput;

现在在 index.js 中导入此组件并像这样使用它 -

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import CodeInput from "./CodeInput";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
   <StrictMode>
      <CodeInput />
   </StrictMode>
);