1

我是 ReactJS 的新手，我正在使用 Firebase 构建一个应用程序，其中我面临一个奇怪的场景，让我解释一下。

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 中累加，但会显示警报（“from firebase”）。如果我像这样调用“onSubmit={this.submitbtn()}”，甚至在我触发提交按钮之前，数据就会被添加到火力库中。我不明白为什么我要面对这种奇怪的行为。

这是完整的联系表格代码。

import React,{Component} from 'react';

从'./firebase'导入{db}；从'mdbreact'导入{MDBContainer，MDBRow，MDBCol，MDBBtn，MDBIcon，MDBInput}；类 ContactForm 扩展组件 { 构造函数（道具） { 超级（道具）；this.state= { name:'', email:'', subject:'', message:'',

    }
}



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;
4

1 回答 1

0

我不确定这是否是您的问题，但可能是您的功能有问题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()肯定是指正确的 this 上下文。

于 2020-09-20T12:10:41.207 回答