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组件带验证带大小的就做完了。

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

未完待续