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

一: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,
            })
        }})

完毕!

相关推荐
fox_16 小时前
深入理解React中的不可变性:原理、价值与实践
前端·react.js
Github项目推荐16 小时前
你的错误处理一团糟-是时候修复它了-🛠️
前端·后端
Code小翊16 小时前
C语言bsearch的使用
java·c语言·前端
云枫晖16 小时前
Webapck系列-初识Webpack
前端·javascript
慧一居士16 小时前
HTML5 功能介绍,使用场景,对应功能点完整使用示例
前端
海在掘金6112717 小时前
告别“undefined is not a function”:TS如何让你的函数调用更安心
前端
云中雾丽17 小时前
Flutter中Stream的各种使用场景和实现方式
前端
CptW17 小时前
第1篇(Ref):搞定 Vue3 Reactivity 响应式源码
前端·面试
葡萄城技术团队17 小时前
基于 SpreadJS 的百万级数据在线数据透视表解决方案:技术解析与实践
前端
爱隐身的官人17 小时前
XSS平台xssplatform搭建
前端·xss