I have some doubts. When I am writing components with React, I didn't know if this was reasonable.
The following is my case.
I want to write a form component that internally uses State to store the current values, and has some validation methods. It doesn't need to be coupled or linked to the outside, but only returns the current result when I need to get the values.
The above functions can be achieved using both controlled and uncontrolled components.
I can implement a controlled component by using Props to specify the current value and pass the
function of updating the value.
Another method is to implement getValue function inside the component. When externally needed, use ref to call the getValue function of the component to implement uncontrolled components.
I think the second method is what I want.
The first method requires external components to control the state inside the component, which I think will destroy the cohesion of the component. For the caller, I don't care what the internal implementation of the component is. I just want to get the current state by some interfaces when I need it, and if the component has any internal updates it won't affect the external call. I think such a component is perfect.
I can use ref to implement this design, but using hooks can't call methods inside the component via ref.
So, can't hooks be used like this?
Or is there a better design and best practices?
As the picture shows
I have some doubts. When I am writing components with React, I didn't know if this was reasonable.
The following is my case.
I want to write a form component that internally uses
Stateto store the current values, and has some validation methods. It doesn't need to be coupled or linked to the outside, but only returns the current result when I need to get the values.The above functions can be achieved using both controlled and uncontrolled components.
I can implement a controlled component by using Props to specify the current value and pass the
function of updating the value.
Another method is to implement getValue function inside the component. When externally needed, use ref to call the getValue function of the component to implement uncontrolled components.
I think the second method is what I want.
The first method requires external components to control the state inside the component, which I think will destroy the cohesion of the component. For the caller, I don't care what the internal implementation of the component is. I just want to get the current state by some interfaces when I need it, and if the component has any internal updates it won't affect the external call. I think such a component is perfect.
I can use
refto implement this design, but usinghookscan't call methods inside the component via ref.So, can't hooks be used like this?
Or is there a better design and best practices?
As the picture shows