Reactjs-Popup：无需点击/hover 如何监听布尔值触发弹窗

reactjs-popup 本身支持受控调用模式，你只需要将组件的open属性绑定你声明的布尔状态，即可实现状态变化时自动触发弹窗显隐，具体修改步骤如下：

• 修正你代码中Popup组件的属性拼写错误，你之前写的model应为modal（模态框模式属性）
• 调整useEffect中的判断逻辑，仅当错误内容匹配2 factory code incorrect时才修改弹窗显示状态
• 给Popup绑定open属性关联showPopup状态，同时添加onClose回调用于关闭弹窗时更新状态

修改后的完整代码如下：

import React, { useState, useEffect } from 'react';
import { useField } from "formik";
import { StyledTextInput, StyledLabel, StyledIcon, ErrorMsg } from "./Styles";
import { FiEyeOff, FiEye } from "react-icons/fi";
import Popup from "reactjs-popup";
// 引入reactjs-popup默认样式，否则弹窗样式会异常
import 'reactjs-popup/dist/index.css';

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

  useEffect(() => {
    // 仅当错误为指定的工厂代码错误时弹出弹窗
    if(meta.error === '2 factory code incorrect'){
      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 
        open={showPopup}
        modal
        onClose={() => setShowPopup(false)}
      >
        <div>
          <p>工厂代码错误，请重新输入</p>
          <button onClick={() => setShowPopup(false)}>关闭</button>
        </div>
      </Popup>    

    </div>
  );
};

你可以根据自身需求自定义弹窗的内容、样式和交互逻辑，只要修改setShowPopup的取值即可随时控制弹窗的显隐。

内容的提问来源于stack exchange，提问作者Guilherme Cavenaghi