对于前端react如果有多个相同模块设置及回显的处理，比如多个年份下的数据的设置及回显

修心光

于 2024-08-29 13:07:02 发布

阅读量37

点赞数

文章标签：前端 react.js javascript

本文链接：https://blog.csdn.net/qq18346342939/article/details/141675995

版权

一：form表单：

{
projectYears.length >0 ? projectYears.map((item, index) => {
                                    return <ul className={'bodyulone'}>
                                        <li>{item}</li>
                                        <li>
                                            <Form.Item className={'formgroup'}>
                                                {getFieldDecorator(`centerMoney${item}`, {})
                                                (<InputNumber className={'input'}
                                                              autocomplete="off"
                                                              disabled={currentSettingYear !== item || !isSave}
                                                              // onChange={(e) => this.handleChange(index, item,1)}
                                                              formatter={value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                                                              parser={value => value.replace(/[^\d.]/g, "").replace(/(\d)\.(\d\d).*$/, '$1.$2').replace(/^\./g, '').replace(/\.{2,}/g, '.').replace(/^\d{10,}$/, 999999999.00)}
                                                />)}
                                            </Form.Item>
                                        </li>
                                        <li>
                                            <Form.Item className={'formgroup'}>
                                                {getFieldDecorator(`localMoney${item}`, {})
                                                (<InputNumber className={'input'}
                                                              autocomplete="off"
                                                              disabled={currentSettingYear !== item || !isSave}
                                                              // onChange={(e) => this.handleChange(index, item,2)}
                                                              formatter={value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                                                              parser={value => value.replace(/[^\d.]/g, "").replace(/(\d)\.(\d\d).*$/, '$1.$2').replace(/^\./g, '').replace(/\.{2,}/g, '.').replace(/^\d{10,}$/, 999999999.00)}
                                                />)}
                                            </Form.Item>
                                        </li>
}

二、保存设置接口：

 // 设置保存
    onClock = (type,year) =>{
        console.log("type",type)
        console.log("year",year)
        if (this.state.currentSettingYear!== 0 && year !== this.state.currentSettingYear){
            this.mesWarning('请先保存当前可编辑行')
            return;
        }
        const {isSave} = this.state
        this.setState({
            isSave:!isSave,
            currentSettingYear:year
        })
        let centerMoney = this.props.form.getFieldValue('centerMoney' + year) //金额
        let localMoney = this.props.form.getFieldValue('localMoney' + year) //金额
        let holderMoney = this.props.form.getFieldValue('holderMoney' + year) //金额
        let enterpriseMoney = this.props.form.getFieldValue('enterpriseMoney' + year) //金额
        let schoolMoney = this.props.form.getFieldValue('schoolMoney' + year) //金额
        console.log("qian-centerMoney：",centerMoney)
        console.log("qian-localMoney：",localMoney)
        console.log("qian-holderMoney：",holderMoney)
        console.log("qian-enterpriseMoney：",enterpriseMoney)
        console.log("qian-schoolMoney：",schoolMoney)
        if (type === "保存"){
            let data = {
                schoolId: this.state.schoolId,
                investType: this.state.uplevelCategory,
                projectId: this.state.projectId,
                statYear: year,
                centerInvest: centerMoney,
                localInvest: localMoney,
                holderInvest: holderMoney,
                enterpriseInvest: enterpriseMoney,
                schoolInvest: schoolMoney,
            }
            updateBudgetSourceFund(data).then(res => {
                this.selectBudgetSourceFundList();
                this.mesSuccess('操作成功');
            })
        }
    }

二、查询回显方法

await selectBudgetSourceFundList(data).then(res => {
            if (res){
                for (let i = 0; i < res.length; i++) {
                    console.log("年份数据res[i]：",res[i]);
                    let centerMoney = 'centerMoney' + res[i].statYear;
                    let localMoney = 'localMoney' + res[i].statYear;
                    let holderMoney = 'holderMoney' + res[i].statYear;
                    let enterpriseMoney = 'enterpriseMoney' + res[i].statYear;
                    let schoolMoney = 'schoolMoney' + res[i].statYear;
                    console.log("form字段:",centerMoney)
                    this.props.form.setFieldsValue({
                        [centerMoney]: res[i].centerInvest,
                        [localMoney]: res[i].localInvest,
                        [holderMoney]: res[i].holderInvest,
                        [enterpriseMoney]: res[i].enterpriseInvest,
                        [schoolMoney]: res[i].schoolInvest,
                    })
                }
            this.setState({
                //设置反显数据
                selectProjectInvestList: res,
            })
        }})

完毕！