时间戳

首页 > 解决方案 > Reactjs按钮未触发

reactjs - Reactjs按钮未触发

问题描述

我最近自学了 javascript、react 和 nodejs。我遇到了提交按钮不起作用但我拥有的其他按钮正在工作的问题。我使用 Chrome 作为我的浏览器，并且我也在 Firefox 中对其进行了测试，但我仍然无法正常工作。当前，当按下按钮时，它会完全重置状态。

我尝试将函数作为箭头函数传递，对该函数的引用，将按钮移动到子级之外，使用道具在子级内部移动。除了在孩子中编写函数之外的所有内容。


handleDocs = async () =>{
        console.log('Handle Docs')
        var x = this.state
        if(x.Status==='Approved'){
            var vendorList = []
            var i = 0
            await Axios.get('/staff/'+x['Credit Officer']).then(staff =>{
                x['Credit Officer'] = staff.data[0]['First Name'] + ' ' + staff.data[0]['Last Name']
                    Axios.get('/staff/'+ x['Second Approval']).then(response =>{
                    x['Second Approval'] = response.data[0]['First Name'] + ' ' + response.data[0]['Last Name']          
                    Axios.get('/staff/'+x.application['BDO']).then(response =>{
                        x.application['BDO'] = response.data[0]['First Name'] + ' ' + response.data[0]['Last Name']
                        Axios.post('/genCreditApproval/'+x.AppId, x).then(()=>{
                            Axios.get('return-CreditApproval/'+x.AppId, {responseType: 'blob'}).then((res)=>{
                                const pdfBlob = new Blob([res.data], {type: 'applicaiton/pdf'})
                                saveAs(pdfBlob, x.companyInfo['Company Name'] + ' Credit Aproval.pdf')
                            })

                        })
                        Axios.post('/genCreditScoreCard/'+x.AppId, x).then(()=>{
                            Axios.get('return-CreditScoreCard/'+x.AppId, {responseType: 'blob'}).then((res)=>{
                                const pdfBlob = new Blob([res.data], {type: 'application/pdf'})
                                saveAs(pdfBlob, x.companyInfo['Company Name'] + ' Score Card.pdf')
                            })

                        })
                        if(this.state.source['Source Class']===1){
                            Axios.post("/genCreditApprovalTransmittal/"+x.AppId, x).then(()=>{
                                Axios.get('/return-CreditApprovalTransmittal/'+x.AppId, {responseType: 'blob'}).then((res)=>{
                                    const pdfBlob = new Blob([res.data], {type: 'application/pdf'})
                                    saveAs(pdfBlob, x.companyInfo['Company Name'] + ' Approval Transmittal.pdf')
                                })
                            })
                            Axios.post("/genDocRequestForm/"+this.state.AppId, x).then(()=>{
                                Axios.get("/return-DocRequestForm/"+ this.state.AppId).then((res)=>{
                                    const pdfBlob = new Blob([res.data], {type: 'application/pdf'})
                                    saveAs(pdfBlob, x.companyInfo['Company Name'] + ' Doc Request Form.pdf')
                                })
                            })
                        }
                        else if(this.state.source['Source Class']===2){
                            Axios.post("/genCreditApprovalTransmittalDiscounter/"+this.state.AppId, x).then(()=>{
                                Axios.get('/return-CreditApprovalTransmittal/'+x.AppId, {responseType: 'blob'}).then((res)=>{
                                    const pdfBlob = new Blob([res.data], {type: 'application/pdf'})
                                    saveAs(pdfBlob, x.companyInfo['Company Name'] + ' Approval Transmittal.pdf')
                                })
                            })
                            Axios.post("/genFundingCoverSheet/"+this.state.AppId, x).then(()=>{
                                Axios.get("/return-FundingCoverSheet/"+this.state.AppId,x).then((res)=>{
                                    const pdfBlob = new Blob([res.data], {type: 'application/pdf'})
                                    saveAs(pdfBlob, x.companyInfo['Company Name'] + ' Funding Cover Sheet.pdf')
                                })
                            })
                        }


                    })
                })
            })
        }
    }

render() {
        if(this.state.stage === 0){
            return this.renderCredit();
        }else if(this.state.stage === 1){
            return <Additional nextStage={this.handleNext} handleText={this.handleAdditionalText} handleChange={this.handleAdditional} credit={this.state}  />
        }
        else{
            return <div>
                {this.scoreCard()}
                <br/>
                <button className="btn btn-sm btn-success" onClick={this.handleDocs}>Submit</button>
            </div>
        }
    }

}

我希望在单击按钮后下载 4 个 pdf。

标签： reactjs

解决方案

我认为你的状态正在改变，因为你直接在你的函数中操作状态对象，改变你的函数

handleDocs = async () =>{
    console.log('Handle Docs')
    var x = { ...this.state}; // create a copy
    // remaining code

希望能帮助到你

推荐阅读