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

完毕!

相关推荐
一朵梨花压海棠go23 分钟前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x30 分钟前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java34 分钟前
CSS3核心技术
前端·css·css3
空山新雨(大队长)1 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术1 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫1 小时前
探索 CSS 过渡:打造流畅网页交互体验
前端·css
元亓亓亓1 小时前
JavaWeb--day1--HTML&CSS
前端·css·html
β添砖java1 小时前
CSS的文本样式
前端·css
前端小趴菜051 小时前
css - 滤镜
前端·css