How to forward input ref to a function by onClick button

Question

I am trying to forward input ref text/string data to a function by clicking the button. but I cant forward or pass the data to my function by using button

--questionRef is my ref input data

--answerQuestion is my function

<input ref={questionRef} size="80"></input>
 <button type="button" onClick={answerQuestion} >Enter</button>

I tried to use my button for forward the questionRef input to answerQuestion function but it failed. Also it works when I click enter on my keyboard

You can directly access the ref in your function. Unless the function has been declared in a different scope. — Junius L, Dec 18 '22 at 19:34

Fide · Answer 1 · 2022-12-18T20:30:05.493

Pretty simply:

<input ref={questionRef} size="80"></input>
   <button 
        type="button" 
        onClick={() => answerQuestion(questionRef)}
   >Enter
   </button>

Eventually, you can include also the onClick event to your function, depends on what you need to do with it:

<input ref={questionRef} size="80"></input>
   <button 
        type="button" 
        onClick={(e) => answerQuestion(questionRef, e)}
   >
     Enter
   </button>

Based on Junius L. comment:

const questionRef = useRef()
const answerQuestion = () => {
      doSomethingWithRef(questionRef) // questionRef is accessible in whole component scope
}

<input ref={questionRef} size="80"></input>
   <button 
        type="button" 
        onClick={answerQuestion}
   >Enter
   </button>

what's the point of passing the ref when you can actually reference in the function? — Junius L, Dec 18 '22 at 20:20

How to forward input ref to a function by onClick button

1 Answers1