如何嵌入Calendly Anchor Tag与React和Material-UI。

Question

我想用Reacrjs和Material-UI嵌入Calendly的锚标签。

Calendly的说明是。

<!-- Calendly link widget begin -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>
<a href="" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/bbb'});return false;"> Schedule Here</a>
<!-- Calendly link widget end -->

我试着这样做了

<Typography className={classes.root}>
    <Link href="#" onClick={Calendly.initPopupWidget({url:'https://calendly.com/bbb'})}>
       Schedule Here
    </Link>
</Typography>

并在react应用的公共文件夹中的index.html上添加了说明中提到的脚本和链接标签。

谢谢你，我想用Reacrjs和Material-UI嵌入Calendly的锚标签。

Answer 1

你好像是在调用 Calendly.initPopupWidget({url:'https://calendly.com/bbb'}) 而不是将该函数传递给onClick处理程序。这将导致弹出窗口在链接被渲染时出现，而不是在链接被点击时出现。

您可以将onClick函数修改为以下内容以防止这个问题。

<Link href="#" onClick={() => window.Calendly.initPopupWidget({url:'https://calendly.com/bbb'})}>
       Schedule Here
</Link>

这将包裹对 initPopupWidget 在匿名函数中，这样Calendly函数只有在链接被点击时才会启动。