Реагировать на модальные компоненты с помощью функциональных крючков - PullRequest
Новая
       40

Реагировать на модальные компоненты с помощью функциональных крючков

0 голосов
/ 02 мая 2020

Я работаю над приложением, для которого требуется модальный компонент, в настоящее время этот компонент включает три реквизита, которые передаются для обратного вызова трех различных модальных структур в структуре приложения. Чего мне нужно добиться, так это то, что при нажатии кнопки для указанного c модального объекта в модальную обертку добавляется уникальный класс, который будет идентифицировать каждый модальный при нажатии, таким образом манипулируя css с помощью селекторов для этих модальных объектов.

см. Ниже: 

const NWmodal = (props) => {
return (
<Modal>
  <Modalmain data-modal-type="this should pass in a unique id to its modal once button is clicked">
      <div>
        {props.ejectModal}
      </div>
      <div>
        {props.timeModal}
      </div>
      <div>
        {props.leaveModal}
      </div>
    <Close>
      x
    </Close>
  </Modalmain>
</Modal>
);
}
  <NWmodal
    id="timeModal"
    timeModal={<NWtimeModal/>} (callback for timemodal component)
  />
  <NWmodal
    id="leaveModal"
    leaveModal={<NWleaveModal/>} (callback for leavemodal component)
  />
  <NWmodal
    id="ejectModal"
    leaveModal={<NWejectModal/>} (callback for ejectmodal component)
  />

function Nav() {
return (
  <ul>
    <li>
      <button
        href="javascript:void(0)"
        data-modal="timeModal"
        onClick={event}>
         Time Modal
      </button>
    </li>
    <li>
      <button
        href="javascript:void(0)"
        data-modal="leaveModal"
        onClick={event}>
         Leave Modal
      </button>
     </li>
     <li>
      <button
        href="javascript:void(0)"
        data-modal="ejectModal"
        onClick={event}>
         Eject Modal
      </button>
    </li>
  </ul>

); }

1 Ответ

0 голосов
/ 02 мая 2020

В качестве отказа от ответственности: я все еще изучаю эту вещь React, но подход, который я, скорее всего, выберу ...

Можно использовать хук useRef создать переменные, которые затем могут быть связаны с вашими модалами в качестве ссылки. Например: 

const ejectModalRef = useRef()

<NWmodal id="ejectModal" ref={ejectModalRef} />

Узел будет доступен в коде onClick JS как 'ejectModalRef.current'.

(Не забудьте импортировать useRef например: import React, { useRef } from "react";

HTH

...