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

在本文中，我们将学习如何在 ReactJs 中添加代码输入。 React 是一个免费的开源前端 JavaScript 库，用于构建用户界面或 UI 组件。它由 Facebook 和一个由个人开发者和公司组成的社区维护。

方法：要添加我们的代码输入，我们将使用 react-code-input 包。 react-code-input 包帮助我们将代码输入集成到我们的应用程序中。所以首先，我们将安装 react-code-input 包，然后我们将在我们的主页上添加一个代码输入。

创建 ReactJs 应用程序：您可以使用以下命令创建一个新的 ReactJs 项目：

npx create-react-app gfg

安装所需的包：现在我们将使用以下命令安装 react-code-input 包：

npm i react-code-input

项目结构：它看起来像这样。

添加代码输入：安装包后，我们可以轻松地在应用程序的任何页面上添加代码输入。对于此示例，我们将向主页添加代码输入。

在App.js文件中添加以下内容：

Javascript

import React from 'react';
import ReactCodeInput from 'react-code-input';
  
export default function GfgInput() {
  const props = {
    inputStyle: {
      fontFamily: 'monospace',
      margin:  '4px',
      MozAppearance: 'textfield',
      width: '40px',
      borderRadius: '3px',
      fontSize: '14px',
      height: '26px',
      paddingLeft: '7px',
      backgroundColor: 'white',
      color: 'lightskyblue',
      border: '1px solid lightskyblue'
    },
    inputStyleInvalid: {
      fontFamily: 'monospace',
      margin:  '4px',
      MozAppearance: 'textfield',
      width: '40px',
      borderRadius: '3px',
      fontSize: '14px',
      height: '26px',
      paddingLeft: '7px',
      backgroundColor: 'black',
      color: 'red',
      border: '1px solid red'
    }
  }
  
  return (
    

      
GeeksforGeeks React - Code Input
      
    
  );
}

说明：在上面的示例中，我们首先导入 ReactCodeInput 组件并在名为 props 的新变量中添加一些样式。之后，我们使用安装的包添加我们的代码输入。

运行应用程序的步骤：在终端中运行以下命令来运行应用程序。

npm start

输出：