В React обработка пользовательского ввода является фундаментальным аспектом создания интерактивных и динамических веб-приложений. Несмотря на то, что существуют различные способы захвата и управления пользовательским вводом, одним из мощных инструментов в вашем наборе инструментов React является хук useRef. В этой статье мы рассмотрим хук useRef и продемонстрируем несколько методов для получения вводимых пользователем данных в React. Так что пристегнитесь и будьте готовы повысить уровень своей игры с пользовательским вводом!

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

import React, { useRef } from 'react';
const InputExample = () => {
  const inputRef = useRef();
  const handleClick = () => {
    const value = inputRef.current.value;
    console.log(value);
  };
  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Submit</button>
    </div>
  );
};
export default InputExample;

В этом фрагменте кода мы создаем ссылку с именем inputRefс помощью перехватчика useRef. Мы присваиваем его элементу ввода с помощью атрибута ref. При нажатии кнопки отправки мы получаем доступ к входному значению через inputRef.current.value.

Метод 2: очистка поля ввода
Иногда необходимо очистить поле ввода после захвата его значения. Вот пример, демонстрирующий, как этого добиться с помощью перехватчика useRef.

import React, { useRef } from 'react';
const ClearInputExample = () => {
  const inputRef = useRef();
  const handleClick = () => {
    const value = inputRef.current.value;
    console.log(value);
    inputRef.current.value = ''; // Clearing the input field
  };
  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Submit</button>
    </div>
  );
};
export default ClearInputExample;

В этом методе после доступа к входному значению мы присваиваем inputRef.current.valueпустую строку, фактически очищая поле ввода.

Метод 3. Фокус на поле ввода
Существуют сценарии, в которых вы хотите автоматически фокусироваться на поле ввода при загрузке страницы. Давайте посмотрим, как этого можно добиться с помощью перехватчика useRef.

import React, { useRef, useEffect } from 'react';
const FocusInputExample = () => {
  const inputRef = useRef();
  useEffect(() => {
    inputRef.current.focus();
  }, []);
  return (
    <div>
      <input ref={inputRef} type="text" />
    </div>
  );
};
export default FocusInputExample;

В этом примере мы используем хук useEffect, чтобы сфокусироваться на поле ввода, вызывая inputRef.current.focus()внутри эффекта. Пустой массив зависимостей ([]) гарантирует, что эффект запускается только один раз при монтировании компонента.

Метод 4: обработка ввода в формах
При работе с формами часто приходится обрабатывать несколько полей ввода. Давайте посмотрим, как мы можем обрабатывать ввод формы с помощью перехватчика useRef.

import React, { useRef } from 'react';
const FormExample = () => {
  const nameRef = useRef();
  const emailRef = useRef();
  const handleSubmit = (e) => {
    e.preventDefault();
    const name = nameRef.current.value;
    const email = emailRef.current.value;
    console.log(name, email);
  };
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">Name:</label>
        <input ref={nameRef} type="text" id="name" />
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <input ref={emailRef} type="email" id="email" />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};
export default FormExample;

В этом примере мы создаем отдельные ссылки (nameRefи emailRef) для каждого поля ввода и получаем доступ к их значениям в функции handleSubmit. e.preventDefault()предотвращает поведение отправки формы по умолчанию.

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