时间戳

首页 > 解决方案 > 现在在表单提交中调用函数

javascript - 现在在表单提交中调用函数

问题描述

我正在学习 React 课程，在这个模块中我正在学习如何将数据插入 Firebase 数据库，但我坚持当前课程，因为我的代码没有在数据库中插入数据，试图调试我发现的问题没有调用“地籍”功能。有人知道为什么它不在数据库中插入数据吗？

我没有收到任何错误，唯一的问题是我在输入字段中插入数据，然后单击按钮，但它没有将数据插入数据库。


import React, { Component } from 'react';
import firebase from 'firebase'

export default class App extends Component {
  constructor (props){
    super(props);
    this.state = {
      tokenInput: '',
      token: 'Carregando',
      nome: '',
      idade: '',
    };

    this.cadastrar = this.cadastrar.bind(this);

      // Your web app's Firebase configuration
    let firebaseConfig = {
      apiKey: "xxxxxx",
      authDomain: "xxxxx",
      databaseURL: "xxxx",
      projectId: "xxxx",
      storageBucket: "xxxx",
      messagingSenderId: "xxxx",
      appId: "xxxx"
    };
    // Initialize Firebase
    if(!firebase.apps.length){
    firebase.initializeApp(firebaseConfig)};

    // Olheiro
    /*
      firebase.database().ref('token').on('value', (snapShot) => {
      let state = this.state;
      state.token = snapShot.val().token;
      this.setState(state);
    });
    */

    firebase.database().ref('token').on('value', (snapshot) => {
      let state = this.state;
      state.token = snapshot.val();
      this.setState(state);
    });

    firebase.database().ref('usuarios').child(1).on('value', (snapShot) => {
      let state = this.state;
      state.nome = snapShot.val().nome;
      state.idade = snapShot.val().idade;
      this.setState(state);
    });

  }

  cadastrar(e){
    firebase.database.ref('token').set(this.state.tokenInput);
    e.preventDefault();
  }

  render(){
    const { token, nome , idade} = this.state;
    return(
      <div>
        <form onSubmit={this.cadastrar}>
          <input type='text' value={this.state.tokenInput} 
          onChange={(e) => this.setState({tokenInput: e.target.value})} />
          <button type='submit'>Cadastrar1</button>
        </form>

        <h1>Token: {token} </h1>
        <h1>Nome: {nome} </h1>
        <h1>Idade: {idade} </h1>
      </div>
      );
    }
}

标签： javascriptreactjsfirebasefunction

解决方案

cadastrar(e){
  firebase.database.ref('token').set(this.state.tokenInput);
  e.preventDefault();
}

看起来这个函数没有被调用，但控制台可能在从表单提交重新加载页面之前显示一个 TypeError ，因为database.ref它不是一个函数。然后代码将在到达该e.preventDefault()行之前停止执行。为了帮助将来捕获这些错误，我建议将preventDefault调用放在处理程序的顶部，这样控制台输出就不会丢失。

为了修复 TypeError，我相信您需要将其更改为firebase.database().ref('token')

功能齐全：

cadastrar(e){
  e.preventDefault();
  firebase.database.ref('token').set(this.state.tokenInput);
}

推荐阅读