单击 javascript 按钮时，如何将数据推送到 firebase？

Question

当谈到 JavaScript 时，我完全是个菜鸟，似乎无法解决这个问题。

我有一个 main.js 文件，它是来自 Adobe animate 的 output。 其中是我添加的以下相关代码：

this.button = new lib.submit();
this.button.name = "button";
    this.button.on("click", function (a) {
        var address = document.getElementById("addrs").value
        var data ={address:address}
        console.log(data)
    }.bind(this));

现在，我只是将我在TextInput('addrs')中输入的信息显示到控制台，以验证一切正常。

我还在 index.js 中建立了与 Firebase 数据库的连接，我有以下代码：

push(ref(db), {
  address: "1234 Maple Ln",
});

这只是一个 static 占位符，供我验证 Firebase 是否可以接收信息。

我要做的是将当前保存到var data ={address:address}的信息推送到 Firebase 而不是 static address: "1234 Maple Ln" 。

我在网上找到的所有教程都使用 HTML 表格。 当提交按钮与push()位于不同的 JavaScript 文件中时，如何执行此操作？

Answer 1

根据文档，您可以使用set()将数据写入数据库。 set() function 接受两个 arguments：

1. ref function，进一步接受两个 arguments
   1.a. 数据库实例
   1.b。 数据库的端点
   

2. 需要添加的数据。

因此，您可以创建一个 function 来处理 firebase 中数据的创建，如下所示：

import { getDatabase, ref, set } from "firebase/database";

function writeUserData(address) {
  const db = getDatabase();
  set(ref(db, 'ENDPOINT/'), {
    address
  });
}

此外，您可以挂钩此 function 以单击按钮上的侦听器（调用此 function 并将所需数据作为参数传递）。

this.button.on("click", function (a) {
        var address = document.getElementById("addrs").value
        writeUserData(address)
        console.log(data)
    }.bind(this));

请注意，在获取address数据后，我没有将数据显式转换为 object，因为当键和值变量命名相同时，javaScript 会在后台为我们执行此操作。 这称为Object 解构。

如果您在两个不同的文件中有 function 和事件侦听器，您可以在存在侦听器的文件中导入 function，或者在侦听器中定义被调用者 ZC1C425268E68385D14AB5074C179 逻辑。 在这两者中，建议前者保持代码干净和模块化。

索引.js

import { getDatabase, ref, set } from "firebase/database";

export function writeUserData(address) {
  const db = getDatabase();
  set(ref(db, 'ENDPOINT/'), {
    address
  });
}

主.js

import {writeUserData} from 'path/to/indexjs'

this.button.on("click", function (a) {
        var address = document.getElementById("addrs").value
        writeUserData(address)
        console.log(data)
    }.bind(this));

（或）在点击监听器中包含数据推送逻辑：

import { getDatabase, ref, set } from "firebase/database";

this.button.on("click", function (a) {
        var address = document.getElementById("addrs").value
        const db = getDatabase();
        set(ref(db, 'ENDPOINT/'), {
        address
        });
        console.log(data)
    }.bind(this));

Answer 2

我想到了。

@Prajwal-Kulkarni 为我指明了正确的方向。 我只需要改变

push(ref(db), {
   address: "1234 Maple Ln",
});

至

  window.writeUserData=function(address) {
  push(ref(db), {
    address
  });
  }