Как сфокусировать вход дочернего компонента из родительского компонента в React

В предыдущей статье я рассказал о том, как вызвать функцию дочернего компонента из родительского компонента. В этой статье мы рассмотрим, как сфокусировать вход, находящийся в дочернем компоненте, при нажатии на кнопку в родительском компоненте.

Содержание

Настройка проекта
Создание дочернего компонента
Создание ссылки и передача ее дочернему компоненту
Фокусировка ввода дочернего компонента
Исходный код и демонстрация

Настройка проекта

Создайте проект react, выполнив следующую команду:

npx create-react-app react-focus-child

Войти в полноэкранный режим Выйти из полноэкранного режима

Обновите index.css следующими стилями:

body {
  margin: 1rem auto;
  display: flex;
  justify-content: center;
  max-width: 800px;
}

.App {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

button {
  margin-bottom: 1rem;
}

Войти в полноэкранный режим Выйти из полноэкранного режима

Создание дочернего компонента

Теперь создайте дочерний компонент с полем ввода:

import React from "react"

const ChildComp = () => {
  return (
    <div>
      <input />
    </div>
  )
}

export default ChildComp

Войти в полноэкранный режим Выйти из полноэкранного режима

Создание ссылки и передача ее дочернему компоненту

Мы будем использовать хук useRef для ссылки на дочернее поле ввода.
Поэтому давайте создадим ссылку в родительском компоненте:

import { useRef } from "react"
import ChildComp from "./ChildComp"

function App() {
  const childInputRef = useRef(null)

  return (
    <div className="App">
      <ChildComp childInputRef={childInputRef} />
    </div>
  )
}

export default App

Вход в полноэкранный режим Выйти из полноэкранного режима

В дочернем компоненте нам нужно получить переданный реквизит и установить его на элемент ввода:

import React from "react"

const ChildComp = ({ childInputRef }) => {
  return (
    <div>
      <input ref={childInputRef} />
    </div>
  )
}

export default ChildComp

Войти в полноэкранный режим Выход из полноэкранного режима

Фокусировка ввода дочернего компонента

Теперь в родительском компоненте создадим кнопку, добавим обработчик onClick и сфокусируем вход:

import { useRef } from "react"
import ChildComp from "./ChildComp"

function App() {
  const childInputRef = useRef(null)

  const focusChild = () => {
    childInputRef.current && childInputRef.current.focus()
  }
  return (
    <div className="App">
      <button onClick={focusChild}>Focus child</button>
      <ChildComp childInputRef={childInputRef} />
    </div>
  )
}

export default App

Вход в полноэкранный режим Выход из полноэкранного режима

Теперь, если вы протестируете приложение, вы сможете увидеть, что вход фокусируется при нажатии на кнопку в родительском компоненте.

Исходный код и демонстрация

Вы можете скачать исходный код здесь и просмотреть демонстрацию здесь.