如何从 ReactJS 中的输入中修剪空格？

修剪空白意味着从开始和结束的文本输入中删除空白。以下示例显示了如何在 ReactJS 中从文本输入中修剪空白。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

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

cd foldername

第 3 步：创建 ReactJS 应用程序后，使用以下命令安装验证器模块：

npm install validator

项目结构：它将如下所示。

项目结构

App.js：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

Javascript

import React, { useState } from "react";
import validator from 'validator'
  
const App = () => {
  
  const [value, setValue] = useState('')
    
  const validate = (inputText) => {
      setValue("#"+validator.trim(inputText)+"#")
  }
  
  return (
    

      
        
Trimming White Space in ReactJS
        Enter Text:  validate(e.target.value)}> 

        {value}
      
    
  );
}
  
export default App

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

npm start

输出：

• 如果用户在没有任何空格的情况下输入输入，则以下将是输出。您可以看到文本保持原样，因为输入文本中没有空格。

• 如果用户从两端输入带有空格的输入，则以下将是输出。您可以看到最终输出的文本通过删除空白从两侧进行了修剪。

注意：在上面的示例中， #是从两端附加的，以便用户可以看到删除空格的结果。