如何在 React 中使用本地存儲預填充 Hubspot 表單字段

Question

我有一個 React 應用程序，其中所有 Web 表單都與 Hubspot 集成。

我的目標：我想根據登錄的用戶憑據（使用本地存儲）在每個網絡表單上預填寫以下字段

1. 名
2. 姓
3. email

通過使用表單 ID，我在前端顯示了一個表單，ID 如下所示：

[hubspot]32323-3232-3232-83232-af6ab9332333[/hubspot]

我也有門戶 ID，每個網絡表單都有不同的 ID。

我怎樣才能實現我的上述目標？ 我需要創建一個單獨的組件還是可以通過其他方式實現？

下面是我的組件：現在我正在嘗試將測試值輸入名字字段

import React, { useEffect } from "react";

const HubspotContactForm = ({ pageContext, ...props }) => {


  useEffect(() => {

 document.getElementById("firstname-3478d953-3c8d-4bea-8501-af6ab93cac87").value = "test123"

      });
}

export default HubspotContactForm;

如果我檢查下面的名字字段是 output，我們可以在其中看到來自 Hubspot 的字段 ID。

Answer 1

不確定為什么必須使用本地存儲執行此操作。 如果您在登錄后從 API 獲取用戶憑據，則使用受控的 forms 和 state 掛鈎將其直接傳遞到表單字段。

如果您說您在用戶登錄后將其憑據存儲在 localStorage 中，然后使用localStorage.getItem(key)方法檢索它們，然后將其傳遞給您的受控表單（使用表單本身中的value屬性） .