今天遇到了一个需求就是要求将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}
/>
</>
)
}
效果如下
因为这是用于国外的一个项目,所以没有做中文的检测。