Как сделать, чтобы при клике на кнопку появлялось поле ввода?

Чтобы реализовать функционал, при котором появляется поле ввода при клике на кнопку в React, вам потребуется несколько шагов. Давайте их рассмотрим подробно:

1. Создайте компонент, в котором будет реализована кнопка и поле ввода. Для примера, давайте назовем его InputField.

2. В состояние компонента InputField добавьте переменную showInput, которая будет отвечать за отображение или скрытие поля ввода. Установите ее значение по умолчанию в false.

import React, { useState } from 'react';

const InputField = () => {
  const [showInput, setShowInput] = useState(false);

  return (
    <div>
      <button onClick={() => setShowInput(true)}>Показать поле ввода</button>
      {showInput && <input type="text" />}
    </div>
  );
};

export default InputField;

3. В компоненте InputField добавьте кнопку, по клику на которую будет меняться значение переменной showInput на true. При этом поле ввода будет появляться или скрываться в зависимости от значения этой переменной. Для этого используйте условный оператор {showInput && <input type="text" />}.

4. После того, как компонент InputField создан, вы можете использовать его в других компонентах. Для этого импортируйте его и расположите в нужном месте вашего приложения:

import React from 'react';
import InputField from './InputField';

const App = () => {
  return (
    <div>
      <h1>Мое приложение</h1>
      <InputField />
    </div>
  );
};

export default App;

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