使用 Docusign Clickwrap API 做出反应答案

【问题标题】：React with Docusign Clickwrap API使用 Docusign Clickwrap API 做出反应
【发布时间】：2020-09-30 06:50:01
【问题描述】：

我按照本教程https://dev.to/tis-ventures-inc/api-world-hackathon-report-no-2-docusign-clickwrap-with-react-2imp 完成了我的docusign clickwrap。但是在我的表单上，我想保持我的提交按钮处于禁用状态，直到最终用户在 docusign clickwrap iframe 上单击“同意”。由于Docusign clickwrap 是由Docusign 提供的，我似乎无法将侦听器附加到“同意”按钮以了解何时单击它以启用我的表单提交按钮。

【问题讨论】：

您的代码在哪里？尝试将相关部分放在这里，以便我们清楚地看到问题。

标签： reactjs typescript docusignapi

【解决方案1】：

啊，render() 函数上有易于使用的回调，可让您在用户同意或拒绝时做出响应（如果启用了拒绝按钮）。

如果需要，传递给每个回调的 agreement 在 agreedOn 或 declinedOn 时间戳上有元数据。

下面的 React 快速示例（将其切换为使用钩子并运行 sn-p 而不是将其作为 HTML 注入）：

function App() {
  React.useLayoutEffect(() => {
    docuSignClick.Clickwrap.render({
      environment: 'https://demo.docusign.net',
      accountId: '...',
      clickwrapId: '...',
      clientUserId: '...',

      onMustAgree(agreement) {
        // Called when no users have previously agreed by the above client user ID for the most recent required Clickwrap version
      },

      onAgreed(agreement) {
        // Called when either 1) the clientUserId has previously agreed 2) the clientUserId has clicked agree and completed successfully
      },

      onDeclined(agreement) {
        // Called when the clientUserId has declined successfully
      }
    }, '#ds-clickwrap');
  }, []);

  return <div id="ds-clickwrap" />
}

<script src="https://demo.docusign.net/clickapi/sdk/latest/docusign-click.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【讨论】：

天哪，谢谢。我搜索了最长时间。