封装一个自己的Input组件，Input的文本全部变成大写。

今天遇到了一个需求就是要求将input输入框内的英文字母全部变成大写的。现在我们就来完成这个需求。

import { Input } from 'antd';
import { useRef, useState } from 'react';

//自定义一个将输入框内容(英文字母)变为大写的输入组件
export default function MyInput(props) {
  //inputRef用来获取当前的input对象
  const inputRef =  useRef();
 
 //inputValue用来设置input框内的文本的
  const [inputValue,setInputValue] =  useState('');
 
 //handleOnChange用于处理用户在input框内输入内容的时候的响应函数
  const handelOnChange = ()=>{
    setInputValue(()=>inputRef?.current?.input?.value.toUpperCase());
  }
 
 return(
   <>
      <Input 
        placeholder='Please Enter' 
        ref = {inputRef} 
        onChange={handelOnChange} 
        value={inputValue}
        />
    </>
  )

}

效果如下

因为这是用于国外的一个项目，所以没有做中文的检测。