Question

168

React: set focus on componentDidMount, how to do it with hooks?

rated 0 times [ 172] [ 4] / answers: 1 / hits: 18851 / 6 Years ago, wed, november 7, 2018, 12:00:00

In React, with classes I can set the focus to an input when the component loads, something like this:

class Foo extends React.Component {

    txt1 = null;



    componentDidMount() {

        this.txt1.focus();

    }



    render() {

        return (

            <input type=text

                ref={e => this.txt1 = e}/>

        );

    }

}

I'm trying to rewrite this component using the new hooks proposal.

I suppose I should use useEffect instead of componentDidMount, but how can I rewrite the focus logic?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

janjadonb

Add To Favorites

Follow

Total Points: 4

Total Questions: 114

Total Answers: 118

Location: Mali

Member since Fri, Dec 3, 2021

3 Years ago

janjadonb questions

1 How to execute slickNext method in react-slick carousel?

Tue, Nov 10, 20, 00:00, 4 Years ago

1 How to set focus on custom input in ReactJS using useRef and react hooks?

Fri, Oct 23, 20, 00:00, 4 Years ago

1 React Router scroll page to the top after transition

Wed, Oct 14, 20, 00:00, 4 Years ago

1 Vue3 Creating Component Instances Programmatically on button click

Wed, Oct 7, 20, 00:00, 4 Years ago

1 How to create array of strings in VueJS?

Tue, Apr 14, 20, 00:00, 4 Years ago

View All

answered 6 Years ago marinalyssak · Accepted Answer

You can use the useRef hook to create a ref, and then focus it in a useEffect hook with an empty array as second argument to make sure it is only run after the initial render.

const { useRef, useEffect } = React;



function Foo() {

  const txt1 = useRef(null);



  useEffect(() => {

    txt1.current.focus();

  }, []);



  return <input type=text ref={txt1} />;

}



ReactDOM.render(<Foo />, document.getElementById(root));

<script src=https://unpkg.com/[email protected]/umd/react.production.min.js></script>

<script src=https://unpkg.com/[email protected]/umd/react-dom.production.min.js></script>



<div id=root></div>