Как в react передать данные по клику в модальное окно?

Пользователь

от caterina , в категории: JavaScript , год назад

Как в react передать данные по клику в модальное окно?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от josie , год назад

@caterina 

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

  1. Создайте состояние в компоненте, которое будет хранить данные, которые нужно передать в модальное окно.
1
2
3
4
5
6
7
import React, { useState } from "react";

function MyComponent() {
  const [modalData, setModalData] = useState(null);

  // ...
}


  1. Добавьте обработчик клика на элемент, который будет вызывать модальное окно и передавать данные в состояние.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
function MyComponent() {
  const [modalData, setModalData] = useState(null);

  const handleClick = (data) => {
    setModalData(data);
    // вызов модального окна
  };

  // ...

  return (
    <div>
      {/* Элемент, на который нужно добавить обработчик */}
      <button onClick={() => handleClick({ foo: "bar" })}>Открыть модальное окно</button>
    </div>
  );
}


  1. В модальном окне используйте переданные данные.
1
2
3
4
5
6
7
8
function Modal({ modalData }) {
  return (
    <div>
      {/* Использование переданных данных */}
      <p>Переданные данные: {modalData.foo}</p>
    </div>
  );
}


  1. Добавьте компонент модального окна в компонент, где находится состояние и передайте в него данные из состояния.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
function MyComponent() {
  const [modalData, setModalData] = useState(null);

  const handleClick = (data) => {
    setModalData(data);
    // вызов модального окна
  };

  // ...

  return (
    <div>
      <button onClick={() => handleClick({ foo: "bar" })}>Открыть модальное окно</button>

      {/* Компонент модального окна с переданными данными */}
      {modalData && <Modal modalData={modalData} />}
    </div>
  );
}


Теперь при клике на элемент в компоненте MyComponent, данные будут переданы в состояние, а затем в компонент модального окна.

Пользователь

от laney_johnson , 7 дней назад

@caterina 

Это верное руководство по передаче данных из React компонента в модальное окно. Давайте также рассмотрим распространенный подход, который использует библиотеку React Modal:

  1. Установите библиотеку React Modal:
1
npm install react-modal


  1. Создайте компонент модального окна с помощью React Modal:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import ReactModal from 'react-modal';
import React, { useState } from 'react';

function Modal({ isOpen, closeModal, data }) {
  return (
    <ReactModal isOpen={isOpen} onRequestClose={closeModal}>
      <h2>Данные в модальном окне:</h2>
      <p>{data}</p>
    </ReactModal>
  );
}


  1. Используйте этот компонент в основном компоненте и передавайте данные через состояние:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
function App() {
  const [modalIsOpen, setModalIsOpen] = useState(false);
  const [modalData, setModalData] = useState(null);

  const openModal = (data) => {
    setModalData(data);
    setModalIsOpen(true);
  };

  const closeModal = () => {
    setModalIsOpen(false);
    setModalData(null);
  };

  return (
    <div>
      <button onClick={() => openModal("Данные для модального окна")}>Открыть модальное окно</button>
      <Modal isOpen={modalIsOpen} closeModal={closeModal} data={modalData} />
    </div>
  );
}


  1. Вызовите функцию openModal с данными, которые хотите передать в модальное окно, при клике на соответствующем элементе.


Этот подход также позволяет передавать данные в модальное окно и обработывать его состояние с использованием хука useState в React.