Reactjs- Popup：如何在没有 click/hover 的情况下触发 Popup？

Question

当收到 erro.message ===“2 工厂代码不正确”时，我希望显示一个弹出窗口。逻辑相当简单，但是，我不知道如何让这个弹出窗口在某处收听布尔值，如何让它在某处收听布尔值？

这里的组件相当简单：

  import React, { useState, useEffect } from 'react';
import { ErrorMessage, useField } from "formik";
import { StyledTextInput, StyledLabel, StyledIcon, ErrorMsg } from "./Styles";

// Eye for password
import { FiEyeOff, FiEye } from "react-icons/fi";
import Popup from "reactjs-popup";

function MyComponent() { 
  const [state, setState] = useState();
  setState(true);
  return (
    <Popup model> <span> teste</span> </Popup>
  );
}

export const TextInput = ({ icon, ...props }) => {
  const [field, meta] = useField(props);
  const [showpass, setShowpass] = useState(false);
  const [showPopup, setShowPopup] = useState(false);

  useEffect(() => {
    if(meta.error){
    setShowPopup(true);
    }
  }, [meta.error])
  
  return (
    <div style={{ position: "relative" }}>
      <StyledLabel htmlFor={props.name}>{props.label}</StyledLabel>
      {props.type !== "password" && (
        <StyledTextInput
          invalid={meta.touched && meta.error}
          {...field}
          {...props}
        />
      )}
      {props.type === "password" && (
        <StyledTextInput
          invalid={meta.touched && meta.error}
          {...field}
          {...props}
          type={showpass ? "text" : "password"}
        />
      )}
      <StyledIcon>{icon}</StyledIcon>
      {props.type === "password" && (
        <StyledIcon onClick={() => setShowpass(!showpass)} right>
          {showpass && <FiEye />}
          {!showpass && <FiEyeOff />}
        </StyledIcon>
      )}
      {meta.touched && meta.error ? (
        <ErrorMsg>{meta.error}</ErrorMsg>
      ) : (
        <ErrorMsg style={{ visibility: "hidden" }}>.</ErrorMsg>
      )}
      <Popup style={{visibility: "hidden"}}></Popup>    

    </div>
  );
};

Answer 1

没看懂Popup组件是在哪里定义的，但是思路应该是这样的：

const [showPopup, setShowPopup] = useState(true);

useEffect(() => {
  if (yourcondition meets criteria) {
    setShowPopup(!showPopup);
  }
}, [yourcondition]);


<Popup disabled={showPopup} ... />

有了这个，当像“yourcondition”这样的依赖项（它可能是来自商店、redux、上下文、道具、另一个状态等的一些值）发生变化时，它满足你想要的标准（例如 if (yourcondition === 'no' or whatever) {, or if (!yourcondition) { , etc, useEffect 将设置 disabled (or show, 我不知道 Popup 组件属性) Popup 为 false 如果它是是的。

Answer 2

你走对了。只需更改道具名称即可。

是open和onClose,

<Popup open={show} onClose={() => setShow(false)}>

参考：https://react-popup.elazizi.com/component-api

Reactjs- Popup：如何在没有 click/hover 的情况下触发 Popup？

Reacjs- Popup : How do I trigger a Popup without it being click/hover?

reactjs

reactjs-popup