react+ts 仿antd input输入框

input框

首先我们先确定我们的Input组件的需求,
1 有大有小 size属性
2 后面可以加图案 icon属性
3 可以前后缀 prepand/append
4 是否禁用 disabled在这里插入图片描述

当我们自己想封装一个组件时,这个接口首先要继承input本身有的属性,如type,id等等,所以要继承于InputHTMLAttributes<HTMLElement 》其次,因为input标签本身就拥有size属性,故我们要忽略它,用Omit<>即可。IconProps是frotawesome的icon属性。
这样一个接口就完成了。
封装一个组件需要几个步骤,接口已经写完了,
接着要抽离我们自己定义的属性,其他的属性原封不动的还给input标签
在这里插入图片描述
2 根据属性不同计算className在这里插入图片描述
使用变量属性的方法来动态添加类
最后实现业务逻辑
在这里插入图片描述
在这里插入图片描述
一个简单版input组件带验证带大小的就做完了。在这里插入图片描述

接着对其进行优化,再加几个功能

未完待续

猜你喜欢

转载自blog.csdn.net/lin_fightin/article/details/115028211