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

Question

对于 JavaScript，我完全是个菜鸟，似乎无法解决这个问题。

我有一个 main.js 文件，它是 Adob​​e animate 的输出。其中是我添加的以下相关代码：

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",
});

这只是我验证 Firebase 可以接收信息的静态占位符。

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

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

Answer 1

我想通了。

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

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

到

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

Answer 2

根据docs，您可以使用set() 将数据写入数据库。 set() 函数接受两个参数：

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

2. 需要添加的数据。

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

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

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

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

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

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

如果您将函数和事件侦听器放在两个不同的文件中，您可以将函数导入到侦听器所在的文件中，或者在侦听器中定义被调用函数逻辑。两者中，建议前者保持代码简洁和模块化。

Index.js

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

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

Main.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));