Советы и рекомендации по прямому доступу к узлам DOM

Хук useRef — это встроенный хук React, который используется для создания ссылки на узел DOM, чтобы вы могли взаимодействовать с ним напрямую. Хук useRef — это функция, которая принимает максимум один аргумент в качестве начального значения и возвращает объект. Возвращаемый объект имеет специальное свойство, называемое текущим.

Вот пример того, как вы можете использовать хук useRef для создания простой формы, которая принимает данные от пользователя:

import { useRef } from 'react';

function MyForm() {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

В этом примере мы используем хук useRef для создания ссылки на элемент input в нашей форме. Затем мы передаем эту ссылку элементу input, используя реквизит ref. Это позволяет нам получить доступ к свойству value элемента input в нашей функции handleSubmit, которая запускается при отправке формы.

Мы также используем метод preventDefault(), чтобы форма не обновляла страницу, когда пользователь отправляет ее.

Приведенный выше пример является простым, вы можете добавить к нему больше входных данных и логики, также вы можете использовать useState для обработки входных данных формы и отправки их на сервер или любую другую логику, которую вы хотите применить.

Мы используем хук useRef для хранения значений без запуска повторного рендеринга компонента. Мы не можем сделать это с крючком useState. Обновление значения состояния с помощью хука useState приводит к повторному рендерингу компонента. Если мы хотим, чтобы наш компонент синхронизировался с состоянием, мы используем хук useState. Иногда мы просто не хотим, чтобы компонент перерисовывался при обновлении значения, тогда мы используем хукuseRef.

Я надеюсь, что эта статья помогла вам понять, что такое хук useRef и как его использовать.

Если вам нравятся такие истории и вы хотите поддержать меня, пожалуйста, поделитесь моим контентом как можно больше. 👇 Ваша поддержка очень важна для меня, чтобы написать следующую историю — спасибо.

Want to Connect?

LinkedIn - Twitter