Question

我是reactjs的新手。我正在使用fireadmin dynamic admin panel购买的版本，在此面板中我创建了一个包含表单的页面。现在我想将该表单值保存到我的firebase数据库。此管理面板具有使用模式文件添加数据的功能。但是我想从前端添加数据。我已经按照教程video tutorial进行了操作。如果你有任何指导请告诉我。这也给我错误firebase不起作用。

我的功能

 import Config from   '../config/app';    
 import DbConfig from   '../config/database';
    handleChange(event) {
        this.setState({value: event.target.value});
    }


addMessage(e){
    e.preventDefault(); // <- prevent form submit from reloading the page
    /* Send the message to Firebase */
   DbConfig.database().ref('billing').push(this.inputEl.value,this.inputEm.value);

    this.inputEl.value = ''; // <- clear the input
    this.inputEm.value = ''; 
  }

          render() {
        return (
                <div className="content">
                <NavBar></NavBar>
          <div className="row">
            <div className="col-md-10">
                <div className="card">
                    <form onSubmit={this.addMessage.bind(this)}>
      <input type="text" ref={ el => this.inputEl = el }/>
      <input type="text" ref={ em => this.inputEm = em }/>
      <input type="submit"/>

    </form>
            </div>

          </div>
                </div>
        )
      }

database.js

 import * as firebase from 'firebase';
require("firebase/firestore");
import Config from './app';

var FbApp = firebase.initializeApp(Config.firebaseConfig);
module.exports = FbApp; //this doesnt have to be database only

app.js

  //FireBase
     exports.firebaseConfig = {
         apiKey: "AIzaSyDsPufr5Dhusqal0bB8VDD9N6yv9u0Lo1E",
         authDomain: "tester-8e38d.firebaseapp.com",
         databaseURL: "https://tester-8e38d.firebaseio.com",
         projectId: "tester-8e38d",
         storageBucket: "tester-8e38d.appspot.com",
         messagingSenderId: "490493205074"
     };

Answer 1

如果输入元素this.handleChange中的.form-control将输入值保存到状态，则需要在表单提交时将该状态值保存到firebase。使用react dev工具确保将所需内容保存到状态，或者向我们显示handleChange方法，以便我们看到。

目前，您正在使用handleAdd方法从firebase开始。删除所有用于读取数据的this.rootRef.once...代码。你想写数据。

相反，首先要确保您的数据库功能方便。您上面的回复中不清楚您撰写的let database = firebase.database();。如果它与您显示的代码位于同一文件中，请在this.rootRef.push(NewTodo)方法中将database.ref().push(NewTodo)替换为handleAdd。

如果let database = firebase.database();不在同一个文件中，那么您需要导出刚刚创建的数据库引用，然后将其导入到要使用它的文件的顶部。如果您收到错误是database is not a function那么这很可能就是问题所在。你在哪里设置SDK？如果你解释一下，它会更容易帮助你。我在这里的帖子https://joshpitzalis.svbtle.com/setup中解释了setup react和firebase的基本知识，它是针对firestore数据库的，但它与实时数据库的方法基本相同。

另一个混淆点是text中的handleAdd(text)参数来自哪里。目前还不清楚你在哪里使用handleAdd方法。您似乎在表单提交上使用this.handleSubmitFirebase并在输入更改时使用this.handleChange，但您没有向我们展示任何一种方法的代码，因此它确实令人困惑。确保handleAdd(text)以某种方式连接到用户界面，我会在表单提交时使用它。

Answer 2

Fianlly我找到了我的解决方案，这就是我为解决我的问题所做的工作。感谢@Josh Pittman your guidance，如果没有它，我就无法让它成功。

  import Config from   '../config/app';
    import DbConfig from   '../config/database';  
     addMessage(e){
            e.preventDefault(); // <- prevent form submit from reloading the page
            /* Send the message to Firebase */
            var userInfo = {
                billing_name : this.pnm.value,
                billing_flat : this.fno.value,
              }; //user info
            DbConfig.database().ref('billing').push(userInfo);

            this.pnm.value = ''; // <- clear the input
            this.fno.value = ''; 
          }
     render() {
        return (
                <div className="content">
                <NavBar></NavBar>
          <div className="row">
            <div className="col-md-12">
                <form onSubmit={this.addMessage.bind(this)}>
              <input type="text" ref={ el => this.inputEl = el }/>
              <input type="text" ref={ em => this.inputEm = em }/>
              <input type="submit"/>

            </form>
            </div>

          </div>
    </div>
        )
      }

Answer 3

首先从npm添加firebase包。

npm install firebase --save

然后，导入firebase实例

import * as firebase from 'firebase';

let database = firebase.database();
database().ref('/users').once('value')
 .then(function (snapshot) {
  console.log(snapshot.val())
});

Answer 4

首先从npm添加firebase软件包。

-> config/fire contains firebase information

Student.js

import 'bootstrap/dist/css/bootstrap.min.css';
import React, { Component } from 'react';
import './App.css';
import fire from './config/fire';
import Home from './Home';
class Student extends Component {
constructor() {
super()
this.state = {
    email: '',
    password: ''}
this.Change = this.Change.bind(this);
this.press = this.press.bind(this);
}
Change(e) {
    this.setState({
        [e.target.name]: e.target.type === 'number' ? parseInt(e.target.value) : e.target.value,
    });
}
press(e) {
    e.preventDefault();
    var nmbr = this.state.userId + 1
    if (e.target.innerText === "Signin") {
        this.setState({
            redirect: true,
            userId: nmbr
        }, () => {
            fire.database().ref("Students/").child("userdata").set({
                password: this.state.password,
                email: this.state.email,
            }).then((data) => {
                //success callback
                console.log('data ', data)
            }).catch((error) => {
                //error callback
                console.log('error ', error)
            })
        })
    }
}
render() {
return (
    <form className="center
    <h1 style={{ textAlign: 'center' }}>{this.props.value} </h1>
        <div className="col-md-4 center boundary">
                <div className="form-row center">
                    <div className="form-group col-md-11 center Text-center" >
                        <label htmlFor="inputEmail">Your Email</label>
                        <input type="email" onChange={this.Change} className="form-control" id="inputEmail" name="email" placeholder="Email" />
                    </div>
                </div>
                <div className="form-row center">
                    <div className="form-group col-md-11 center Text-center">
                        <label htmlFor="inputPassword">Set Password</label>
                        <input type="password" onChange={this.Change} className="form-control" id="inputPassword" name="password" placeholder="Password" />
                    </div>
                </div>
                <div className="form-row center">
                    <div className="form-group col-md-5 center text-center">
                        <button type="submit" onClick={this.press} className="btn btn-primary ">Signin</button>
                    </div>
                </div>
            </div>
        </form>
    );
  }
}
export default Student;

如何将React表单数据添加到Firebase实时数据库？

4 个答案: