Question

我是ReactJS的新手，我正在用Firebase构建一个应用程序，在那里我遇到了一个奇怪的场景，lemme解释。

sendtofirebase()
{
    db.collection('contacts').add({
        name:'faizam',
        email:'shdj',
        subject:'hdjshj',
        message:'hjhdjs',
    }).then(()=>{
    alert("Data Sent");
    }).catch((error)=>{
        alert("Error is",error);
    });
    alert(" from firebase")
}
submitbtn()
{       
    console.log('Name',this.state.name);
    console.log('Email',this.state.email);
    console.log('subject',this.state.subject);
    console.log('message',this.state.message);
    this.sendtofirebase();
    alert("from submitbtn");
    
}

onSubmit={()=>this.submitbtn()}如果a调用了这样的函数，则数据不会添加到firebase中，但是会显示alert（“ from firebase”）。如果我这样称呼“ onSubmit = {this.submitbtn（）}”，那么即使在触发提交按钮之前，数据也会被添加到firebase中。我不明白为什么我要面对这种奇怪的行为。

这是完整的联系表代码。

import React,{Component} from 'react';

从'./firebase'导入{db}；从“ mdbreact”导入{MDBContainer，MDBRow，MDBCol，MDBBtn，MDBIcon，MDBInput}； ContactForm类扩展Component { 构造函数（道具） { 超级（道具）; this.state = { 名称：''，电子邮件：''，学科：''，消息：''，

    }
}



sendtofirebase()
{
    db.collection('contacts').add({
        name:'faizam',
        email:'shdj',
        subject:'hdjshj',
        message:'hjhdjs',
    }).then(()=>{
    alert("Data Sent");
    }).catch((error)=>{
        alert("Error is",error);
    });
    alert(" from firebase")
}
submitbtn()
{       
    console.log('Name',this.state.name);
    console.log('Email',this.state.email);
    console.log('subject',this.state.subject);
    console.log('message',this.state.message);
    this.sendtofirebase();
    alert("from submitbtn");
    
}
render()
{
    return(
    <>
    <div>
        <MDBContainer>
          <MDBRow>
            <MDBCol md="6">
              <form className="form" onSubmit={()=>this.submitbtn()}>
                <p className="h5 text-center mb-4">Contact Me</p>
                <div className="grey-text">
                  <MDBInput label="Your name" icon="user" group type="text" validate error="wrong"
                    success="right" />
                  <MDBInput label="Your email" icon="envelope" group type="email" validate error="wrong"
                    success="right" />
                  <MDBInput label="Subject" icon="tag" group type="text" validate error="wrong" success="right" />
                  <MDBInput type="textarea" rows="2" label="Your message" icon="pencil-alt"  />
                </div>
                <div className="text-center">
                  <MDBBtn  value="submit" type="submit" outline 
                       color="secondary">
                    Send
                    <MDBIcon far icon="paper-plane" className="ml-1" />
                  </MDBBtn>
                </div>
              </form>
            </MDBCol>
          </MDBRow>
        </MDBContainer>
    </div>
     </>
        );
  }
}export default ContactForm;

Answer 1

我不确定这是否是您的问题，但可能是您的函数使用了错误的this binding

要解决此问题，您应该更改：

sendtofirebase()
{
    db.collection('contacts').add({
        name:'faizam',
        email:'shdj',
        subject:'hdjshj',
        message:'hjhdjs',
    }).then(()=>{
    alert("Data Sent");
    }).catch((error)=>{
        alert("Error is",error);
    });
    alert(" from firebase")
}
submitbtn()
{       
    console.log('Name',this.state.name);
    console.log('Email',this.state.email);
    console.log('subject',this.state.subject);
    console.log('message',this.state.message);
    this.sendtofirebase();
    alert("from submitbtn");
    
}

收件人：

sendtofirebase = () => {
    db.collection('contacts').add({
        name:'faizam',
        email:'shdj',
        subject:'hdjshj',
        message:'hjhdjs',
    }).then(()=>{
    alert("Data Sent");
    }).catch((error)=>{
        alert("Error is",error);
    });
    alert(" from firebase")
}
submitbtn = () => {        
    console.log('Name',this.state.name);
    console.log('Email',this.state.email);
    console.log('subject',this.state.subject);
    console.log('message',this.state.message);
    this.sendtofirebase();
    alert("from submitbtn");
    
}

基本上，someFunction = () => {}将函数放在类的构造函数中-这应该意味着调用this.someFunction()绝对是指该上下文。

使用ReactJS的联系表格不会将数据发送到Firebase

1 个答案: