How to add two refs in input? reactjs

Question

I'm planning to set to autofocus the last element of the array by using a ref, but I don't know how to do it since I'm already using ref for react-hook-form

I've been to this link, but I don't know how to apply it in my case. How can I use multiple refs for an array of elements with hooks?,

Somebody knows how to inject this two refs to one input?

Here's my ref to auto focus an input

const [inputRef, setInputRef] = useFocus();

And here's my current codes with react-form-hook's ref:

{[...Array(10)].map((x, i) => (
    <input
      type="text"
      name="book"
      className="border mr-px-5"
      ref={register(rules.book)}
      ref={lastElement ? inputRef : null} // conditional focus ref
    />
)}

Does this answer your question? Using multiple refs on a single React element — Domi
– Domi, Commented Jul 3, 2021 at 16:53
why do you need 2 refs ?? basically the ref is a reference to a dom element — S B RAKESH RATH
– S B RAKESH RATH, Commented Jul 3, 2021 at 17:05
so you want to focus an input on the happening of specific event then create a array of every element then focus them as you need ... there is no need of 2 refs also You have tabIndex property — S B RAKESH RATH
– S B RAKESH RATH, Commented Jul 3, 2021 at 17:31
@Domi @JagadishLenka I updated the description. I forgot this is a multiple elements. and the focus ref should be conditional. The link you sent earlier can't help I think sir. — tempra
– tempra, Commented Jul 3, 2021 at 17:33

tempra · Accepted Answer · 2021-07-03 20:00:34Z

0

From frequent try and error, I finally found the solution. The refs can actually use as function and then set two refs in it.

And for the react hook form just pass the event on it to make it work also.

Here's the actual solution:

const [inputRef, setInputRef] = useFocus();

{[...Array(10)].map((x, i) => (
    <input
      type="text"
      name="book"
      className="border mr-px-5"
      ref={(event) => {
        register(event, rules.book);
        if (lastElement) inputRef.current = event;
      }}
    />
)}

answered Jul 3, 2021 at 20:00

tempra

2,3914 gold badges19 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add two refs in input? reactjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related