react+ts imitating antd input input box

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 disabledInsert picture description here

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.
Insert picture description here
2 According to different attributes, calculate the className and Insert picture description here
use the variable attribute method to dynamically add the class.
Finally Realize business logic
Insert picture description here
Insert picture description here
A simple version of the input component with verification tape size is done.Insert picture description here

Then optimize it and add a few more features

To be continued

Guess you like

Origin blog.csdn.net/lin_fightin/article/details/115028211