在嵌入式Calendly小部件中安排事件后，如何运行代码？

如何解决在嵌入式Calendly小部件中安排事件后，如何运行代码？

当我使用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: '[e-mail]',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;