Как встроить календарный тег привязки с помощью React и Material-UI - PullRequest
Новая
       76

Как встроить календарный тег привязки с помощью React и Material-UI

2 голосов
/ 29 мая 2020

Я пытаюсь встроить тег привязки Calendly, используя Reacr js и Material-UI.

Инструкция 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>

И добавил теги скриптов и ссылок, указанные в инструкциях по индексу. html в папке publi c приложения реакции

Спасибо.

1 Ответ

2 голосов
/ 29 мая 2020

Похоже, вы вызываете 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 срабатывает только при нажатии на ссылку.

...