等待来自模态框的用户输入

Question

我试图从一个模式弹出框中获取用户的答案，该弹出框启动以确认用户是否确定他在做什么。

我正在使用 ReactJs，所以我将提供一些背景信息，以便每个人都能理解项目的这一部分是如何构成的。 模态是我计划在其他组件中使用的组件。 我正在使用 useRef 挂钩来获取父组件中的模态引用。 模态组件的功能如下所示：

  const [display, setDisplay] = useState(false);
  const [disabledInputs, setDisabledInputs] = useState({ confirm: false });
  const [confirmation, setConfirmation] = useState(null);

  useImperativeHandle(ref, () => {
    return {
      openModal: () => open(),
      closeModal: () => close(),
      getAnswer: () => getAnswer(),
    };
  });

  const close = async () => {
    setConfirmation(false);
    setDisplay(false);

    setTimeout(() => {
      setConfirmation(null);
    }, 500);
  };

  const open = () => {
    setDisplay(true);
  };

  const getAnswer = () => {
    return confirmation;
  };

  const confirm = () => {
    setConfirmation(true);
    setDisplay(false);
    setTimeout(() => {
      setConfirmation(null);
    }, 500);
  };

在父组件中，我有一个按钮，只要单击它就会调用以下 function。

const assingOrder = async () => {
    setDisabledInputs((prevDisabledInputs) => {
      return { ...prevDisabledInputs, assignProv: true };
    });

    const id = await getProviderIDWithEmail(inputs.provider);
    if (id !== null) {
      modalRef.current.openModal();
      let answer = modalRef.current.getAnswer();
      const i = setInterval(() => {
        answer = modalRef.current.getAnswer();
        console.log(answer);
        if (answer !== null) {
          clearInterval(i);
          setDisabledInputs((prevDisabledInputs) => {
            return { ...prevDisabledInputs, assignProv: false };
          });
        }
      }, 500);
    } else {
      setDisabledInputs((prevDisabledInputs) => {
        return { ...prevDisabledInputs, assignProv: false };
      });
    }
  };

这段代码确实有效，但看起来很乱，我认为可能有更好的方法可以使用监听器或类似的东西来解决这个问题，所以我希望有人能帮助我解决这个问题。 预先感谢您的回答。

Answer 1

我认为您不需要在那里设置 setInterval 来检查是否给出了答案。 最好使用 onChange 或 onClick 事件处理程序。 您可以在 state 中有一个变量，例如， disableInputs在模式打开时设置为 true，在回复事件发生时设置为 false，您可以基于此设置输入禁用状态。 看起来你的模式后面也有一个屏幕覆盖，这有利于阻止用户输入。