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

ravibagul91 · Accepted Answer · 2019-07-25 11:37:52Z

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, 2019 at 11:37

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

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

7 Comments

midhun k Over a year ago

I really love this demo but for me am getting Uncaught TypeError: Object(...) is not a function :(

midhun k Over a year ago

any reason why coming like this @ravibagul91

Chris Haines Over a year ago

You need to useState for the textInput value

juztcode Over a year ago

@ravibagul91 , there's no need to use useRef ?

juztcode Over a year ago

@ChrisHaines , there's no need to use useRef?

|

niks · Accepted Answer · 2019-07-25 11:23:37Z

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, 2019 at 11:23

niks

4764 silver badges9 bronze badges

3 Comments

midhun k Over a year ago

But for using refs we need to use stateful component

midhun k Over a year ago

They can't have state, refs or lifecycle methods for stateless components @niks

niks Over a year ago

you can see this page to get more info. reactjs.org/docs/refs-and-the-dom.html

Bhawana · Accepted Answer · 2019-07-25 11:25:07Z

-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, 2019 at 11:25

Bhawana

3801 silver badge6 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

7 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related