Чтобы сохранить входное значение в переменной в React, вы можете выполнить следующие действия:

1. Создайте переменную состояния в функциональном компоненте с помощью хука useStateили в компоненте класса с помощью синтаксиса this.state.

Функциональный компонент (с использованием перехватчика useState):

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

Компонент класса:

import React from 'react';
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
    };
  }
  handleChange = (event) => {
    this.setState({ inputValue: event.target.value });
  };
  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.inputValue}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

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