无法在反应中关闭模态

Question

我有一个模式，当我扫描二维码时它会打开。在此之后，我将道具设置为 true，告诉我的 Responsemodal 打开。问题是，我无法关闭，因为这个道具在子组件中是只读的。

这是我的代码：

 const ResponseModal = (props) => {
    const closeIcon = (
      <svg fill="black" width="28" height="28" viewBox="0 0 36 36" data-testid="close-icon"><path d="M28.5 9.62L26.38 7.5 18 15.88 9.62 7.5 7.5 9.62 15.88 18 7.5 26.38l2.12 2.12L18 20.12l8.38 8.38 2.12-2.12L20.12 18z"></path></svg>
    );

    const {flag, data, title} = props;

    const [open, setOpen] = useState(false);
    const onCloseModal = () => setOpen(false);
    
    
    useEffect(() => {
        if(flag == true) {      <--- qr code scanned, this trigger my ResponseModal to open up but it remains true
            setOpen(true);
        }
    })

    return (
      <>
        <Modal open={open} onClose={onCloseModal} center closeIcon={closeIcon} modalId="response-modal">
          <div className="qr-modal-header-stock">
            <h5>Enter stock</h5>
            <p>{title}</p>
          </div>
        </Modal>
      </ >
    );
  }

我的父组件：

const QrScanner = () => {

    const [data, setData ] = useState('');
    const [flag, setFlag] = useState(false);
    const [title, setTitle] = useState('');

    const history = useHistory();
    useEffect(() => {
      if(data === '') {
          return;
      }

        if (Number.isInteger(parseInt(data)))
        { 
            axios.get('/api/qrcodescanner/ean/' + data)
            .then(res => {
                if (res.data.title != false)
                {
                    setFlag(true);
                    setTitle(res.data.title);
                }
                else
                {
                    setData('Sorry, Wrong barcode!');
                }
        })

      }
  })
      return (
         
      <>
          <BarcodeScannerComponent
              width={500}
              height={500}
              onUpdate={(err, result) => {
                  if (result) {
                      setData(result.text);
                  }
              }}
          />
          <p className="modal-result-show">{data}</p>
          <ResponseModal flag={flag} data={data} title={title}/>    
      </>
      );
  }

即使我将 open 设置为 false onClose，它也会消失并立即出现，有没有想过我遗漏了什么？

Answer 1

您忘记在 useEffect 中添加依赖项。只需将 flag 添加到 dependencies 数组以确保它仅在标志更改时调用

useEffect(() => {
    if(flag == true) {      <--- qr code scanned, this trigger my ResponseModal to open up but it remains true
        setOpen(true);
    }
}, [flag])

Answer 2

我知道你需要向 parent 公开一些东西，有几种方法。

`open` 状态迁移到 parent。

 const ResponseModal = ({ open, setOpen }) => {
    // currently you use a state, but instead
    // relocate this state to the parent
 }

 const QrScanner = () => {
   const [open, setOpen] = useState(false)

   return <ResponseModal open={open} setOpen={setOpen} />
 }

基本上请 parent 管理模态。

监听`on`状态

如果你觉得上面的方法太繁重了，因为你已经有了一个很不错的Modal组件。我们只能建立一个 on 旗帜。

 const ResponseModal = ({ on }) => {
   const [open, setOpen] = useState(on)
   useEffect(() => {
     setOpen(on)
   }, [on])
 }

 const QrScanner = () => {
   const [on, setOn] = useState(false)

   return <ResponseModal on={on} />
 }

这是确保 on 在更改时可以驱动 open 的技巧。在你的 parent 中你可以调用 setOn(false).

我没注意到你已经在使用 flag，所以那就是 on。

无法在反应中关闭模态

cannot close modal in react

dom

modal-dialog

reactjs

`open` 状态迁移到 parent。

监听`on`状态

无法在反应中关闭模态

cannot close modal in react

dom

modal-dialog

reactjs

open 状态迁移到 parent。

监听on状态

`open` 状态迁移到 parent。

监听`on`状态