如何在 React.js 中新增程式碼輸入？

我們可以透過建立一個渲染輸入欄位並處理使用者輸入的元件來在 React.js 中新增程式碼輸入。為此，我們可以使用內建的 React Hook，例如 useState 來管理輸入值並處理更改。此外，我們還可以使用事件處理程式來處理使用者輸入並相應地更新輸入值。讓我們首先了解什麼是 ReactJS，並分析 React Hook “useState” 的用法，因為它將在程式碼中使用。

ReactJS

React 是一個用於構建使用者介面的 JavaScript 庫。它使建立互動式 UI 變得容易。為應用程式中的每個狀態設計簡單的檢視，React 會在資料更改時有效地更新和渲染正確的元件。您還可以構建封裝的元件來管理它們自己的狀態，然後將它們組合起來建立複雜的 UI。

ReactJS 可以建立小型和大型、複雜的應用程式。它提供了一套基本但可靠的功能集，可以使 Web 應用程式快速啟動。它易於掌握現代和遺留應用程式，並且是更快地編碼功能的方法。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}/>

這將允許使用者在 textarea 中鍵入並更新程式碼狀態變數。

  • 要顯示程式碼輸入，您可以使用 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>
);

這將渲染一個 textarea，使用者可以在其中輸入其程式碼，一個 pre 元素，將在使用者鍵入時顯示程式碼，一個按鈕來清除程式碼輸入，以及一個按鈕來提交程式碼。當用戶點選提交按鈕時，將呼叫 handleSubmit 函式並將程式碼輸入作為引數，程式碼將記錄到控制檯。

輸出

更新於: 2023年2月6日

533 次瀏覽

開啟您的 職業生涯

透過完成課程獲得認證

開始
廣告

© . All rights reserved.