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

Метод 1: использование перехватчика useState
Один из самых простых подходов — использование перехватчика useState. Вот пример того, как получить входное значение с помощью этого метода:

import React, { useState } from 'react';
function InputComponent() {
  const [inputValue, setInputValue] = useState('');
  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };
  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <p>Input value: {inputValue}</p>
    </div>
  );
}

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

import React, { useRef } from 'react';
function InputComponent() {
  const inputRef = useRef(null);
  const handleButtonClick = () => {
    const inputValue = inputRef.current.value;
    console.log('Input value:', inputValue);
  };
  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleButtonClick}>Get Input Value</button>
    </div>
  );
}

Метод 3: использование управляемых компонентов
Управляемые компоненты — еще один мощный метод управления входными значениями. Вот пример:

import React, { useState } from 'react';
function InputComponent() {
  const [inputValue, setInputValue] = useState('');
  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };
  const handleButtonClick = () => {
    console.log('Input value:', inputValue);
  };
  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <button onClick={handleButtonClick}>Get Input Value</button>
    </div>
  );
}