How to use forwardRef in a form

Tram Ho

Forwarding refs mean that ref will be passed to a child component. In this post I will introduce the way to get value by ref in a form with multiple inputs.
For example, we aleady have a form with 2 fields: email and password like this:

We created a ref for the parent component, now we forward ref to a child component.

As we can see, in this form, we have 2 inputs, we dont need to use ref directly from the inputs. We also forward refs to children components input

To get value of each input, you can follow this:

With ref, you dont need to use state to save email or password, prevent rendering in many times.

Share the news now

Source : Viblo