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

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

caterina

от caterina , в категории: JavaScript , 7 месяцев назад

26 | 0

react

1 ответ

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

josie

от josie , 7 месяцев назад

@caterina

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

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

import React, { useState } from "react";

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

  // ...
}

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

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

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

  // ...

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

В модальном окне используйте переданные данные.

function Modal({ modalData }) {
  return (
    <div>
      {/* Использование переданных данных */}
      <p>Переданные данные: {modalData.foo}</p>
    </div>
  );
}

Добавьте компонент модального окна в компонент, где находится состояние и передайте в него данные из состояния.

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, данные будут переданы в состояние, а затем в компонент модального окна.

0 | 0

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

1 ответ

Похожие обсуждения: