如何限制 ReactJS 中的用户字符输入限制？

在本文中，我们将学习如何限制用户输入的字符达到一定的限制。

先决条件：关于 reactJs 的知识

创建反应应用程序：

步骤1：创建react项目文件夹，打开终端，如果你已经全局安装了create-react-app，输入命令npm create-react-app文件夹名称。如果您还没有安装 create-react-app，请使用命令 npm -g create-react-app 全局安装，或者可以通过npm i create-react-app 在本地安装。

npm create-react-app project

第2步：创建项目文件夹（即项目）后，使用以下命令移动到该文件夹。

cd project

项目结构：

方法 1：使用 maxLength：我们将使用maxLength属性作为输入。它与用于 HTML 的 maxlength 属性相同。它限制用户输入字符，直到达到我们设置的 maxLength 限制。

在 App.js 文件中，我们正在创建一个简单的输入元素，将名称设置为 maxLength 为 10。

App.js

function App() {
   
 return (
    

      Name:
     
    
  );
}
  
export default App;

运行应用程序：使用以下命令从项目的根目录运行应用程序。

npm start

输出：

我们可以看到，在第 10 个字符之后，我们无法再添加任何内容。

方法 2：创建 onChange函数：在这种方法中，我们正在创建一个简单的表单组件，要求用户输入他们的用户名，当字符长度超过 10 时，将显示警报。

在这个文件中，我们使用 useState 一个 react-hook 来维护状态 userName。我们将创建一个函数handleChange来跟踪用户放置字符的长度，这里的 'e' 是浏览器事件。如果等于 10，则警报将弹出，否则将添加到状态中。

应用程序.js

import React,{useState} from "react";
  
const Form= () => {
  const [userName, setuserName] = useState("");
  
  const handleChange =(e)=>{
  
    // Here we are checking if the length is equal to 10
    if(e.target.value.length===10){ 
      window.alert("Username shouldn't exceed 10 characters")
    }
    setuserName(e.target.value);
  }
  
  return (
    

    
            Please enter username:
              
             

  )
}
  
function App() {
 return (
    

      
Hey! Geek Welcome
    
    
  );
}
  
export default App;

运行应用程序：使用以下命令从项目的根目录运行应用程序。

npm start

输出：