Setting Focus on Input Fields in React

In React, setting focus on an input field after rendering is a common requirement. This can be achieved using various methods, including the autoFocus prop, refs, and lifecycle methods.

Using the autoFocus Prop

The simplest way to set focus on an input field is by using the autoFocus prop. This prop automatically focuses the input field when it is rendered.

<input type="text" autoFocus />

Note that in JSX, the autoFocus prop should be written with a capital "F".

Using Refs

Another way to set focus on an input field is by using refs. A ref is a reference to a DOM node or a component. You can create a ref and attach it to an input field, then use the ref to focus the input field.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  componentDidMount() {
    this.inputRef.current.focus();
  }

  render() {
    return (
      <div>
        <input ref={this.inputRef} type="text" />
      </div>
    );
  }
}

In the above example, we create a ref inputRef in the constructor and attach it to the input field in the render method. Then, in the componentDidMount lifecycle method, we use the ref to focus the input field.

Using Lifecycle Methods

You can also set focus on an input field using lifecycle methods like componentDidMount. This method is called after the component has been rendered.

class App extends React.Component {
  componentDidMount() {
    this.inputRef.current.focus();
  }

  render() {
    return (
      <div>
        <input ref={(input) => (this.inputRef = input)} type="text" />
      </div>
    );
  }
}

In the above example, we create a ref inputRef in the render method and attach it to the input field. Then, in the componentDidMount lifecycle method, we use the ref to focus the input field.

Dynamic Focus

If you want to control focus dynamically, you can create a hook or a utility function that hides implementation details from your components.

const useFocus = () => {
  const htmlElRef = React.useRef(null);
  const setFocus = () => {
    htmlElRef.current && htmlElRef.current.focus();
  };

  return [htmlElRef, setFocus];
};

You can then use this hook in your components to set focus dynamically.

const FocusDemo = () => {
  const [inputRef, setInputFocus] = useFocus();

  return (
    <>
      <button onClick={setInputFocus}>Focus</button>
      <input ref={inputRef} type="text" />
    </>
  );
};

In conclusion, setting focus on input fields in React can be achieved using various methods, including the autoFocus prop, refs, and lifecycle methods. You can choose the method that best fits your use case.