问题描述
当我使用Calendly安排事件时,我正在使用Calendly API令牌显示事件创建的日期,但是该日期仅在重新加载页面后才显示,而我希望在安排事件后在控制台中对其进行一次更新
下面是代码。
import React,{ useState,useEffect } from 'react';
import axios from 'axios';
import { InlineWidget } from 'react-calendly';
const Calendly = () => {
const [state] = useState()
useEffect(() => {
axios({
method: 'get',url: 'https://v1.nocodeapi.com/user/calendly/hobiiHVeoqPxvtTc',}).then(function (response) {
// handle success
console.log(response.data.collection[response.data.collection.length - 1].created_at);
}).catch(function (error) {
// handle error
console.log(error);
})
},[state])
return (
<div>
<InlineWidget url="https://calendly.com/user/15min"
styles={{
height: '1000px'
}}
pageSettings={{
backgroundColor: 'ffffff',hideEventTypeDetails: false,hideLandingPageDetails: false,primaryColor: '00a2ff',textColor: '4d5055'
}}
prefill={{
email: 'kanna@gmail.com',firstName: 'Kanna',lastName: 'Suresh',name: 'Kanna Suresh',customAnswers: {
a1: 'a1',a2: 'a2',a3: 'a3',a4: 'a4',a5: 'a5',a6: 'a6',a7: 'a7',a8: 'a8',a9: 'a9',a10: 'a10'
}
}}
utm={{
utmCampaign: 'Spring Sale 2019',utmContent: 'Shoe and Shirts',utmMedium: 'Ad',utmSource: 'Facebook',utmTerm: 'Spring'
}} />
<div>
</div>
</div>
);
}
export default Calendly;
解决方法
如果要在安排Calendly事件后运行一些代码,则要收听一条消息,提示Calendly iframe将发回到宿主页面。这是Calendly's JavaScript API的一部分。这是大概的代码。
import React,{ useState,useEffect } from 'react';
import axios from 'axios';
import { InlineWidget } from 'react-calendly';
const isCalendlyScheduledEvent = (e) => {
return e.data.event &&
e.data.event.indexOf('calendly') === 0 &&
e.data.event === 'calendly.event_scheduled'
}
const Calendly = () => {
const [state] = useState()
useEffect(() => {
window.addEventListener(
'message',(e) => {
if (isCalendlyScheduledEvent(e)) {
axios({
method: 'get',url: 'https://v1.nocodeapi.com/user/calendly/hobiiHVeoqPxvtTc',}).then(function (response) {
// handle success
console.log(response.data.collection[response.data.collection.length - 1].created_at);
}).catch(function (error) {
// handle error
console.log(error);
})
}
}
)
},[]) // notice the empty array as second argument - we only need to run it once,equivalent to the old componentDidMount behavior
return (
<div>
...
</div>
);
}
export default Calendly;
更新
react-calendly
软件包实际上包括一个CalendlyEventListener
,用于设置消息侦听器,因此您无需编写太多样板文件。这是相同的代码,但使用的是CalendlyEventListener
组件:
import React,useEffect } from 'react';
import axios from 'axios';
import { InlineWidget,CalendlyEventListener } from 'react-calendly';
const Calendly = () => {
const onEventScheduled = () => {
axios({
method: 'get',}).then(function (response) {
// handle success
console.log(response.data.collection[response.data.collection.length - 1].created_at);
}).catch(function (error) {
// handle error
console.log(error);
})
}
return (
<div>
...
<CalendlyEventListener onEventScheduled={onEventScheduled} />
</div>
);
}
export default Calendly;