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

完毕!

相关推荐
墨渊君3 小时前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css
huabuyu4 小时前
基于 React + MarkdownIt 的 Markdown 渲染器实践:支持地图标签和长按复制
前端
用户7678797737324 小时前
后端转全栈之Next.js SEO优化
react.js·next.js
芦苇Z4 小时前
HTML <a> 标签的 rel 属性全解析:安全、隐私与 SEO 最佳实践
前端·html
在这儿不行4 小时前
Android 15边到边模式
前端
源猿人4 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
红红大虾4 小时前
Defold引擎中关于CollectionProxy的使用
前端·游戏开发
最后一个农民工4 小时前
vue3实现仿豆包模版式智能输入框
前端·vue.js
RoyLin4 小时前
TypeScript设计模式:迭代器模式
javascript·后端·node.js