Как в react передать данные по клику в модальное окно?
1 ответ
от
josie ,
22 дня назад
@caterina
Для передачи данных из React компонента в модальное окно, можно использовать следующий подход:
- Создайте состояние в компоненте, которое будет хранить данные, которые нужно передать в модальное окно.
1 2 3 4 5 6 7 |
import React, { useState } from "react"; function MyComponent() { const [modalData, setModalData] = useState(null); // ... } |
- Добавьте обработчик клика на элемент, который будет вызывать модальное окно и передавать данные в состояние.
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 2 3 4 5 6 7 8 |
function Modal({ modalData }) { return ( <div> {/* Использование переданных данных */} <p>Переданные данные: {modalData.foo}</p> </div> ); } |
- Добавьте компонент модального окна в компонент, где находится состояние и передайте в него данные из состояния.
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, данные будут переданы в состояние, а затем в компонент модального окна.
15