Как значение из инпута передать в переменную react?

Чтобы передать значение из инпута в переменную в React, необходимо использовать механизм управляемого компонента (controlled component).

Вот пример, как это можно сделать:

1. Создаем компонент и определяем в нем переменную состояния, в которую будет передаваться значение из инпута:

import React, { useState } from 'react';

function MyComponent() {
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  }

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <p>Значение из инпута: {inputValue}</p>
    </div>
  );
}

export default MyComponent;

2. Внутри компонента используем элемент input с атрибутом value, который привязывает значение инпута к переменной состояния inputValue.

3. Обработчик handleInputChange вызывается при каждом изменении значения инпута и обновляет переменную состояния.

4. Значение из инпута отображается внутри <p> элемента для наглядности.

Теперь, при вводе текста в инпут, значение будет обновляться в переменной состояния inputValue и отображаться на экране.

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