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

Для достижения желаемого результата вам необходимо использовать React и некоторые библиотеки. Я расскажу вам о двух возможных подходах к решению этой задачи.

1. Используя React Hooks:

Первым шагом следует установить несколько зависимостей при помощи npm или yarn. Выполните команду в вашем терминале:

npm install react react-dom react-modal

После установки зависимостей вы можете начать реализацию. Создайте новый компонент и импортируйте библиотеку react-modal. Подключите стили этой библиотеки к вашему проекту.

import React, { useState } from 'react';
import Modal from 'react-modal';

// Обязательно вызовите эту функцию перед использованием модального окна
Modal.setAppElement('#root');

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleInputClick = () => {
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
  };

  return (
    <div>
      <input type="text" onClick={handleInputClick} />
      <Modal isOpen={isModalOpen} onRequestClose={closeModal}>
        <h2>Модальное окно</h2>
        <button onClick={closeModal}>Закрыть</button>
      </Modal>
    </div>
  );
}

export default App;

В данном примере мы создали компонент App, который содержит текстовый инпут. При клике на этот инпут модальное окно становится видимым. Обратите внимание на вызов функции setAppElement, который сообщает библиотеке, где находится ваш корневой элемент.

2. Используя стороннюю библиотеку React Modal Library:

Вашим следующим шагом будет установка библиотеки React Modal Library. Выполните команду в вашем терминале:

npm install react-modal

После установки вы можете импортировать компонент Modal из этой библиотеки и использовать его в вашем проекте.

import React, { useState } from 'react';
import Modal from 'react-modal';

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleInputClick = () => {
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
  };

  return (
    <div>
      <input type="text" onClick={handleInputClick} />
      <Modal
        isOpen={isModalOpen}
        onRequestClose={closeModal}
        contentLabel="Modal"
      >
        <h2>Модальное окно</h2>
        <button onClick={closeModal}>Закрыть</button>
      </Modal>
    </div>
  );
}

export default App;

В этом примере мы также создали компонент App, который содержит текстовый инпут. При клике на этот инпут модальное окно становится видимым. Здесь мы используем атрибут contentLabel, который описывает содержимое модального окна для доступности.

Оба подхода позволяют достичь вашей цели, но используют разные библиотеки. Выбор зависит от ваших предпочтений и требований проекта.