如何在页面首次加载时触发模式/弹出窗口 - React答案

【问题标题】：How to trigger modal/popup on page first load - React如何在页面首次加载时触发模式/弹出窗口 - React
【发布时间】：2021-07-20 22:12:07
【问题描述】：

当用户进入页面时，我希望首先弹出一个模式，可以在 USER 和 AGENT 之间进行选择，并基于该内容页面将被更新。

首先，我需要弄清楚如何在页面加载时触发模态并将选择的选项保存到 cookie / localStorage。

我知道有一个 JavaScript 函数，像这样：

$(document).ready(function() {
  setTimeout(function() {
    $("#myModal").modal('show');
  }, 2000);

});

当用户在页面上停留 2 秒时，上面的代码 ^ 将触发模式，我想通过 react 实现相同的逻辑 - 想到 useEffect 可以处理吗？

另外，我正在使用 React Bootstrap，我知道该组件有一些功能，例如 onEnter 功能，但我不确定它是否可用？

我现在使用的 React Modal 是由按钮触发的：

const [show, setShow] = useState(false); // trigger

        <Button variant="primary" onClick={() => setShow(true)}>
            Custom Width Modal
        </Button>

模态本身：

            <Modal
                show={show}
                onHide={() => setShow(false)}
                dialogClassName="modal-90w"
                aria-labelledby="contained-modal-title-vcenter"
            >
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-vcenter">
                        Lorem Ipsum Dolor
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Row className="text-center justify-content-center">
                        <Col>
                            <Button>USER</Button>
                        </Col>
                        <Col>
                            <Button>AGENT</Button>
                        </Col>
                    </Row>
                </Modal.Body>
            </Modal>

【问题讨论】：

您不应该将 jquery 与 react 一起使用。发布您希望在其中发生的组件
我用@UdenduAbasili 的当前模式更新了我的帖子

标签： javascript reactjs function bootstrap-modal

【解决方案1】：

既然你说你希望弹出窗口首先显示，你只需要更改它

const [show, setShow] = useState(true)

【讨论】：

没错！虽然这对于输入任何页面都是正确的 - 我只想在索引页面第一次加载给用户并且选择一个选项（代理或用户）后使用它，它将存储在 cookie/localStorage 所以模态赢了'即使在索引页面上也不再显示，除非存储空间再次被清除
所以如果存储当前选择了选项，您希望它只打开一次并且不再出现？
正是我想要实现的目标。
您目前有多少页？主页上的模态是否全部链接？
这是我的错 - 我将模式添加到 App.js - 现在我只将它移动到索引页面，所以它只在索引上触发，但是如果我转到其他页面并返回index，modal再次触发

【解决方案2】：

试试这个

使用第二个参数作为空列表的

useEffect() 只会在组件安装时调用一次。你也可以在调用setShow之前检查cookie。

下面的代码还增加了 2 秒的延迟。

useEffect(()=>{
  setTimeout(()=>{
    setShow(true)
  }, 2000)
}, [])

【讨论】：

谢谢@Ajith，但结果与我评论的您上面的帖子相同。
您是否尊重您在上一个答案中所做的更改？否则，默认值已经是 true，这不会改变。
当我尝试您的解决方案时，我将状态设置为 false
正如我所提到的，您需要额外设置 cookie 并在调用 setShow 之前检查它是否已设置。仅在未设置 cookie 时调用该函数。
这里是设置和检索cookies的方法stackoverflow.com/a/43684059/5321660