input box
First of all, we first determine the needs of our Input component,
1 there are large and small size attributes
2 can be followed by a pattern icon attribute
3 can suffix prepand/append
4 whether to disable disabled
When we want to encapsulate a component, this interface must first inherit the attributes of the input itself, such as type, id, etc., so it must be inherited from InputHTMLAttributes<HTMLElement "Secondly, because the input tag itself has the size attribute, we have to ignore it It, just use Omit<>. IconProps is the icon property of frotawesome.
Such an interface is complete.
Encapsulating a component requires several steps, the interface has been written, and
then we have to extract the attributes we defined, and the other attributes are returned to the input tag intact.
2 According to different attributes, calculate the className and
use the variable attribute method to dynamically add the class.
Finally Realize business logic
A simple version of the input component with verification tape size is done.
Then optimize it and add a few more features
To be continued