react way of setting focus on a particular button in functional component?

Question

Hi I am new to react and on my page load i need to give focus to a button. I am using functional component. I had seen example with class component and in that using componentDidMount and setting focus using refs.

Here i am using functional component and no ComponentDidMount as well.. How can i set focus on functional component to a button on page load ?

export const SubPageHeader=({prop})=>{
return(
<div>
<input type="button"/>
}
export default SubPageHeader

score 18 · Accepted Answer · answered Jul 25 '19 at 11:37

18

You can make use of useEffect hook which is equivalent to componentDidMount,

const SubPageHeader=({prop})=>{
  let textInput = null;
  useEffect(()=>{
    textInput.focus();
  })
  return(
    <div>
      <input type="button" value="Button" ref={(button) => { textInput = button; }}/>
    </div>
  )
}

Demo

answered Jul 25 '19 at 11:37

ravibagul91

20,072
5
36
59

1

I really love this demo but for me am getting Uncaught TypeError: Object(...) is not a function :( – midhun k Jul 25 '19 at 12:03
any reason why coming like this @ravibagul91 – midhun k Jul 25 '19 at 12:12
any idea if I want to avoid using refs? – samhoooo Mar 31 '20 at 09:51
1

You need to useState for the textInput value – Chris Haines Jun 18 '20 at 13:49
1

@ravibagul91 , there's no need to use `useRef` ? – juztcode Jul 17 '21 at 05:12
1

@ChrisHaines , there's no need to use `useRef`? – juztcode Jul 17 '21 at 05:12
How should we do that if we have multiple buttons that are generated in a loop and needs input to be focused on that button click – Zeeshan Shaheen Aug 26 '21 at 10:43

score 0 · Answer 2 · answered Jul 25 '19 at 11:23

0

you can use useEffect instead of componentDidMount to do same thing in functional component.

Use ref on your button element and use it in useEffect method of react to focus button element

answered Jul 25 '19 at 11:23

niks

426
4
9

But for using refs we need to use stateful component – midhun k Jul 25 '19 at 11:42
They can't have state, refs or lifecycle methods for stateless components @niks – midhun k Jul 25 '19 at 11:42
you can see this page to get more info. https://reactjs.org/docs/refs-and-the-dom.html – niks Jul 25 '19 at 11:46

score -1 · Answer 3 · answered Jul 25 '19 at 11:25

-1

For function component you can use hooks, You can use useEffect it is work as ComponentDidMount for functional component.For more detail go through this link : https://reactjs.org/docs/hooks-state.html

answered Jul 25 '19 at 11:25

Bhawana

372
1
6

react way of setting focus on a particular button in functional component?

3 Answers3

Linked