如何解决现在在表单提交中调用函数
我正在做一个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);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。