react自定义TextArea组件，不被拉伸

最新推荐文章于 2024-08-13 08:19:59 发布

IT吃糖

最新推荐文章于 2024-08-13 08:19:59 发布

阅读量1.6k

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/csdn_____c/article/details/122751432

版权

自定义一个TextArea组将文本框内的所有英文字母变为大写，其中还有文本框不被拉伸的代码。

//自定义的富文本框
const MyTextArea= ()=>{
  //自定义一个将输入框内容(英文字母)变为大写的输入组件
  //textareaRef用来获取当前的input对象
  const textareaRef =  useRef();

  //textareaValue用来设置input框内的文本的
  const [textareaValue,setInputValue] =  useState('');
  
  //handleOnChange用于处理用户在input框内输入内容的时候的响应函数
  const handelOnChange = ()=>{
    setInputValue(()=>textareaRef?.current?.resizableTextArea?.textArea?.value.toUpperCase());
  }

  return(
   <>
      <TextArea 
        placeholder='Please Enter' 
        ref = {textareaRef} 
        onChange={handelOnChange} 
        value={textareaValue}
        autoSize={{
          minRows:2,
          maxRows:6       //autoSize可以让文本框不被拉伸
        }}
        style={{
          width:'300px'
        }}
      ></TextArea>
    </>
  )
}

export default MyTextArea;