how to react assign multiple refs react-hook-form

Question

I'm managing my forms using react-hook-form. but I also need to manage an element's click event. In this case, I have to set both refs

   let inputRef = useRef(null);

   const onClick = input => {
      input.click();
   };

<input
     type="file" 
     ref={ref => {
        inputRef = ref;
        register();
     }},
     onClick={() => onClick(inputRef)}
></input>

How can I set multiple refs

will it help? - https://stackoverflow.com/questions/54633690/how-can-i-use-multiple-refs-for-an-array-of-elements-with-hooks — s.kuznetsov, Apr 24 '21 at 22:49

score 1 · Accepted Answer · answered Apr 24 '21 at 22:50

1

              inputRef={ref => {
                 inputLogoSquare = ref;
                 register(ref);
              }}

this is the answer

answered Apr 24 '21 at 22:50

pneuma

241
5
14

1

It's not working for me, could you please explain more? – iranimij Nov 24 '21 at 06:29

score 0 · Answer 2 · answered Nov 24 '21 at 06:33

0

I think it's the best solution.

const myRef = useRef(null);

<input ref={(ref) => { 
         myRef.current = ref; 
         register(ref); 
       }} />

answered Nov 24 '21 at 06:33

iranimij

91
10

score 0 · Answer 3 · answered Aug 29 '22 at 21:53

0

const myRef = useRef<any>();
const { ref, ...rest } = register("email");
<input
   ref={(e) => {
     ref(e);
     myRef.current = e;
   }}
   {...rest}
/>

answered Aug 29 '22 at 21:53

Rian Carlos

1
1

While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. – Adrian Mole Sep 04 '22 at 13:31

how to react assign multiple refs react-hook-form

3 Answers3