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

我们可以在React.js中添加代码输入，通过创建一个组件来渲染一个输入字段并处理用户输入。要做到这一点，我们可以使用内置的React钩子，如useState来管理输入值和处理变化。此外，我们还可以使用事件处理程序来处理用户输入并相应地更新输入值。让我们首先了解什么是ReactJS，并分析React钩子 “useState “的使用，因为它将在代码中使用。

ReactJS

React是一个用于构建用户界面的JavaScript库。它使创建交互式UI变得容易。为你的应用程序中的每个状态设计简单的视图，当你的数据发生变化时，React会有效地更新和呈现正确的组件。你也可以建立管理自己状态的封装组件，然后将它们组合起来，形成复杂的UI。

无论是小型还是大型的、复杂的应用程序都可以用ReactJS创建。它提供了一个基本但可靠的功能集，可以让一个网络应用起步。它很容易掌握当代和遗留的应用程序，是一种更快的功能编码方法。React提供了大量现成的组件，可以随时使用。

UseState Hook

useState是React的一个Hook，允许你为功能组件添加状态。它返回一个有两个元素的数组：当前的状态值和一个更新状态的函数。组件第一次调用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>

你也可以添加一个按钮来清除代码输入并重置状态：

<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;

Now inside of the index.js import this component and use it like this −

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>
);