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

问题描述

我正在做一个React课程，在这个模块上，我正在学习如何将数据插入Firebase数据库，但是由于当前的代码没有在数据库中插入数据，我试图解决这个问题，所以我停留在当前课程中发现未调用“ cadastrar”功能。有人知道为什么它没有在数据库中插入数据吗？

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

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

解决方法

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