当用户进入页面时,我希望有一个模态弹出窗口作为第一件事,并在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>
3条答案
按热度按时间pvabu6sv1#
既然你说你想先显示弹出窗口,你只需要改变一下
ymdaylpp2#
试试 这个
useEffect ( ) 的 第 二 个 参数 为 空 列表 , 只 在 组件 挂载 时 调用 一 次 。 您 也 可以 在 调用
setShow
之前 检查 cookie 。下面 的 代码 还 添加 了 2 秒 的 延迟 。
中 的 每 一 个
f0ofjuux3#
检查工作样本代码:- https://codesandbox.io/s/determined-bell-hnjuso