如何使用 ReactJS 将输入字段中的小写值转换为大写？

有时我们会看到即使我们在表单字段中输入小写，但它们会自动变为大写。今天我们将在本文中实现该功能。

给定一个输入文本区域，任务是在接受用户输入的同时将小写字符转换为大写字符。可以使用 React 来完成。

方法：

• 使用事件监听器，我们将小写值更改为大写。
• 当用户开始输入时，会创建一个 onChange 事件，我们使用 toUpperCase()函数使用输入值的大写值更新值的状态。
• 此更新值会在用户完成输入后反映在表单中。

使用的函数：

toUpperCase()

它将小写字符串值转换为大写。

创建 React 应用程序：

第 1 步：使用以下命令执行 Create react app。

npx create-react-app my-first-app

第 2 步：通过执行以下命令将目录更改为该文件夹：

cd my-first-app

第 3 步：安装以下依赖项。

npm install react
npm install useState

项目结构：

第 4 步：在根组件中导入组件。

文件名： 应用程序.js

Javascript

function App() {
  return (
      
    

        
  
    
  );
}
  
export default App;

第 5 步：使用事件侦听器，我们将小写值更改为大写。

文件名： CapitalLetter.jsx

Javascript

import React, { useState } from 'react'
function CapitalLetter()
{
    const[username,setUsername]=useState('');
    const handleInput=(event)=>{
        event.preventDefault();
        setUsername(event.target.value);
          
    }
    const changeCase=(event)=>{
        event.preventDefault();
        setUsername(event.target.value.toUpperCase());
    }
    return(
       

           

      
Sign In
      

          
          Username:
          
       
          Password:
          
          
        


        
            Log In
        
      
    
       
    )
}
  
export default CapitalLetter;

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

npm start

输出：在浏览器中输入 localhost:3000