Блог

Некоторый контекст: мне нужна функция асинхронного ожидания или Обещание/Решение вернуть выбранную пользователем кнопку выбора. Причина, по которой мне это нужно, заключается в том, что я вызываю функцию deletePost из определенного дочернего компонента Post, и мне нужен модал, существующий на уровне родительского компонента, чтобы предложить пользователю подтвердить удаление или Отменить. Затем мне нужно, чтобы это решение было возвращено компоненту дочерней записи, чтобы продолжить процесс удаления или отменить его в зависимости от того, какую кнопку пользователь нажимает в режиме.

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

 import React, { useState } from "react";

const Example = async () => {
  const [modalOpen, setModalOpen] = useState(false);

  const toggleModal = async () => {
    // Opens Modal
    setModalOpen(!modalOpen);

    let decision = null;  // should be "delete" or "cancel" for return

    /*
        This toggleModal() function will be called from within a child 
        component's deletePost() function to prompt a user for confirmation 
        of deletion or cancellation. Once the modal opens up, I believe I 
        need some kind of async await function HERE to wait on a click 
        decision from the user and then return that selected value all the 
        way back to the deletePost() function that was called from within 
        the child Post component.
    */

    return decision;
  };

  const modalStyle = {
    display: modalOpen ? "block" : "hidden",
  };

  return (
    <div>
      <button onClick={toggleModal}>Open Modal</button>
      <Modal style={modalStyle}>
        
        {/* How to link these buttons to the async await function above */}
        <button>Delete</button>
        <button>Cancel</button>
      </Modal>
      {posts.map((post, index) => (
          <Post
            key={post.id}
            post={post}
            toggleModal={toggleModal}
          />
      ))}
    </div>
  );
};

export default Example;
 

Я не уверен в вашем точном варианте использования, но если вы хотите знать , выбрал ли пользователь Cancel или Confirm , вы можете сделать это, прикрепив отдельное onClick событие к этим двум кнопкам.

 import React, { useState } from "react";

const Example = async () => {
  const [modalOpen, setModalOpen] = useState(false);

  const toggleModal = () => {
    // Opens Modal
    setModalOpen(!modalOpen);
  };
 
  const handleConfirm = () => { //confirm logic }
  const handleCancel = () => { //cancel logic }



  const modalStyle = {
    display: modalOpen ? "block" : "hidden",
  };

  return (
    <div>
      <button onClick={toggleModal}>Open Modal</button>
      <Modal style={modalStyle}>
        <button onClick={handleConfirm}>Confirm</button>
        <button onClick={handleCancel}>Cancel</button>
      </Modal>
    </div>
  );
};

export default Example;
 

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

Редактировать: Добавил этот код и поле, основываясь на моем понимании комментария op.