对于前端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,
            })
        }})

完毕!

相关推荐
晓131344 分钟前
JavaScript加强篇——第七章 浏览器对象与存储要点
开发语言·javascript·ecmascript
Hockor1 小时前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军1 小时前
React 实现 useMemo
前端·react.js·前端框架
海底火旺1 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到111 小时前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter
驴肉板烧凤梨牛肉堡1 小时前
浏览器是否支持webp图像的判断
前端
Xi-Xu1 小时前
隆重介绍 Xget for Chrome:您的终极下载加速器
前端·网络·chrome·经验分享·github
摆烂为不摆烂1 小时前
😁深入JS(九): 简单了解Fetch使用
前端
杨进军1 小时前
React 实现多个节点 diff
前端·react.js·前端框架
用户40812812003811 小时前
拓展运算符和剩余参数
前端