react项目 form表单重置 initialValue

最新推荐文章于 2024-12-13 18:25:18 发布

原创最新推荐文章于 2024-12-13 18:25:18 发布 · 7.8k 阅读

2 ·

CC 4.0 BY-SA版权

react 同时被 2 个专栏收录

3 篇文章

订阅专栏

antd

3 篇文章

订阅专栏

本文探讨了在Ant Design中如何高效使用表单组件，特别是在弹框中实现新增与修改功能的无缝切换。通过具体代码示例，展示了如何在React项目中利用Modal组件结合Form组件，实现动态表单字段的初始化及重置，确保用户体验流畅。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中做了一个弹框，将新增和修改放到了同一个弹框，然后判断一个对象是否有值来判断是新增还是修改。

  render() {
    const extra = (
      <Group>
        <Button onClick={this.handleAdd}>新增</Button>
      </Group>
    );

    return (
      <Card
        extra={extra}
        bordered={false}
      >
        <Search />
        <Table />
        <ModalUpdate />

        <ModalEdit />
      </Card>
    );
  }
}

ModalUpdate 文件的代码如下

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import moment from 'moment';
import { Card, Button, Form, Row, Col, Input, DatePicker, Select, Modal } from 'antd';
import {
  fieldCheckSpace, fieldRequired
} from '../../../utils/utils';
import styles from './index.less';

const { Option } = Select;

const FormItem = Form.Item;


const thirdLayout = {
  xs: 24,
  sm: 24,
  md: 8,
  lg: 8,
  xl: 8,
  xxl: 8,
};
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 24 },
    md: { span: 8 },
    lg: { span: 8 },
    xl: { span: 8 },
    xxl: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 24 },
    md: { span: 14 },
    lg: { span: 14 },
    xl: { span: 14 },
    xxl: { span: 14 },
  },
};
@connect(({ modal, global, loading }) => ({
  modal,
  global,
}))
@Form.create()
export default class Main extends PureComponent {
  componentWillReceiveProps(nextProps) {
    if (!nextProps.modal.modalUpdateDetail) {
      this.props.form.resetFields();
    }
  }
  componentWillUnmount() {
    this.props.dispatch({
      type: 'modal/changeReducers',
      payload: {
        memberInfo: {}, // 数据
      },
    });
  }
  // 返回
  handleBack = () => {
    const { dispatch } = this.props;
    dispatch(routerRedux.goBack());
  };

  // 修改 状态
  handleUpdate = (record) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'modal/fetchUpdateMember',
      payload: {
        ...record,
        status: record.status === 'NORMAL' ? 'DISABLE' : 'NORMAL',
        isJumptoPage: false, // 是否跳页
      }
    });
  };

  handleSubmit = () => {
    // e.preventDefault();
    const {
      form,
      dispatch,
      modal: {
        memberInfo,
      }
    } = this.props;
    const { memberId } = memberInfo;
    form.validateFields({ force: true }, (err, values) => {
      if (!err) {
        // 删除 params.payload 中值为 undefined
        Object.keys(values).map((k) => {
          if (values[k] === undefined) {
            delete values[k];
          }
        });
        if (memberId) { // 修改
          dispatch({
            type: 'modal/fetchUpdateMember',
            payload: {
              ...memberInfo,
              ...values,
            }
          });
        } else {
          dispatch({
            type: 'modal/fetchAddMember',
            payload: {
              ...values,
            }
          });
        }
      }
    });
  };

  // 关闭
  handleCancel = () => {
    this.props.dispatch({
      type: 'modal/changeReducers',
      payload: {
        modalUpdateDetail: false,
        memberInfo: {},
      }
    });
  };

  render() {
    const {
      modal,
      form,
      loadingAllRole,
    } = this.props;
    const { getFieldDecorator } = form;
    const { memberInfo, modalUpdateDetail, } = modal;
    const {
      id,
      memberId,
      memberName,
      shortName,
      owned,
      skillName,
      email,
      phone,
      websiteName,
      website,
      auditor,
      auditAt,
      auditStatus,
      status,
      deleteFlag,
      createdAt,
      createdBy,
      updatedAt,
      updatedBy,
      legalFlg,
      signOrg,
      orgTpCd,
      regRgnTpCd,
      busRgnTpCd,
      provinceTpCd,
      licenseCode,
      icpCode,
      mainOper,
      partOper,
      licenseBeginDate,
      licenseEndDate,
      legalrepresentname,
      legalrepresentid,
      citycode,
      districtCode,
      regAddress,
      regAddrPost,
      runAddr,
      runAddrPost,
      fax,
      phone_service,
      organizationCode,
      remark,
    } = memberInfo;

    return (
      <Modal
        // confirmLoading={loading}
        style={{ top: 20 }}
        onOk={this.handleSubmit}
        visible={modalUpdateDetail}
        title={memberId ? '修改信息' : '新增信息'}
        onCancel={this.handleCancel}
        width={1200}
        // maskClosable={false}
        className={styles.updateLayout}
      >
        <Form>
          <Row gutter={10}>
            <Col {...thirdLayout}>
              <FormItem
                label="简称"
                {...formItemLayout}
              >
                {getFieldDecorator('shortName', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 32, message: '不能超过32个字' },
                  ],
                  initialValue: shortName
                })(
                  <Input placeholder="请输入简称" />
                )}
              </FormItem>

              <FormItem
                label="业务联系人"
                {...formItemLayout}
              >
                {getFieldDecorator('skillName', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 32, message: '不能超过32个字' },
                  ],
                  initialValue: skillName,
                })(
                  <Input placeholder="请输入业务联系人" />
                )}
              </FormItem>

              <FormItem
                label="网站名称"
                {...formItemLayout}
              >
                {getFieldDecorator('websiteName', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 82, message: '不能超过82个字' },
                  ],
                  initialValue: websiteName,
                })(
                  <Input placeholder="请输入网站名称" />
                )}
              </FormItem>

              <FormItem
                label="营业执照开业日期"
                {...formItemLayout}
              >
                {getFieldDecorator('licenseBeginDate', {
                  rules: [
                  ],
                  initialValue: licenseBeginDate && licenseBeginDate !== null ?
                    moment(licenseBeginDate) : null,
                })(
                  <DatePicker />
                )}
              </FormItem>
              <FormItem
                label="营业执照到期日"
                {...formItemLayout}
              >
                {getFieldDecorator('licenseEndDate', {
                  rules: [
                  ],
                  initialValue: licenseEndDate && licenseEndDate !== null ?
                    moment(licenseEndDate) : null,
                })(
                  <DatePicker />
                )}
              </FormItem>

              <FormItem
                label="服务电话"
                {...formItemLayout}
              >
                {getFieldDecorator('phone_service', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 16, message: '不能超过16个字' },
                  ],
                  initialValue: phone_service,
                })(
                  <Input placeholder="请输入服务电话" />
                )}
              </FormItem>
              <FormItem
                label="营业执照"
                {...formItemLayout}
              >
                {getFieldDecorator('licenseCode', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 32, message: '不能超过32个字' },
                  ],
                  initialValue: licenseCode,
                })(
                  <Input placeholder="请输入营业执照" />
                )}
              </FormItem>
              <FormItem
                label="县/区"
                {...formItemLayout}
              >
                {getFieldDecorator('districtCode', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 32, message: '不能超过32个字' },
                  ],
                  initialValue: districtCode,
                })(
                  <Input placeholder="请输入县/区" />
                )}
              </FormItem>
              <FormItem
                label="营业地址"
                {...formItemLayout}
              >
                {getFieldDecorator('runAddr', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 64, message: '不能超过64个字' },
                  ],
                  initialValue: runAddr,
                })(
                  <Input placeholder="请输入营业地址" />
                )}
              </FormItem>
              <FormItem
                label="ICP备案号"
                {...formItemLayout}
              >
                {getFieldDecorator('icpCode', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 32, message: '不能超过32个字' },
                  ],
                  initialValue: icpCode,
                })(
                  <Input placeholder="请输入ICP备案号" />
                )}
              </FormItem>
            </Col>
            <Col {...thirdLayout}>
              <FormItem
                label="商户名称"
                {...formItemLayout}
              >
                {getFieldDecorator('memberName', {
                  rules: [
                    { ...fieldRequired('商户名称') },
                    { ...fieldCheckSpace },
                    { max: 125, message: '不能超过125个字' },
                  ],
                  initialValue: memberName,
                })(
                  <Input placeholder="请输入商户名称" />
                )}
              </FormItem>
              <FormItem
                label="业务联系人邮箱"
                {...formItemLayout}
              >
                {getFieldDecorator('email', {
                  rules: [
                    { ...fieldRequired('业务联系人邮箱') },
                    { ...fieldCheckSpace },
                    { max: 64, message: '不能超过64个字' },
                  ],
                  initialValue: email,
                })(
                  <Input placeholder="请输入业务联系人邮箱" />
                )}
              </FormItem>

              <FormItem
                label="网址"
                {...formItemLayout}
              >
                {getFieldDecorator('website', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 64, message: '不能超过64个字' },
                  ],
                  initialValue: website,
                })(
                  <Input placeholder="请输入网址" />
                )}
              </FormItem>
              <FormItem
                label="法人代表姓名"
                {...formItemLayout}
              >
                {getFieldDecorator('legalrepresentname', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 32, message: '不能超过32个字' },
                  ],
                  initialValue: legalrepresentname,
                })(
                  <Input placeholder="请输入法人代表姓名" />
                )}
              </FormItem>
              <FormItem
                label="法人代表身份证"
                {...formItemLayout}
              >
                {getFieldDecorator('legalrepresentid', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 18, message: '不能超过18个字' },
                  ],
                  initialValue: legalrepresentid,
                })(
                  <Input placeholder="请输入法人代表身份证" />
                )}
              </FormItem>
              <FormItem
                label="注册国家"
                {...formItemLayout}
              >
                {getFieldDecorator('regRgnTpCd', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 32, message: '不能超过32个字' },
                  ],
                  initialValue: regRgnTpCd,
                })(
                  <Input placeholder="请输入注册国家" />
                )}
              </FormItem>
              <FormItem
                label="营业国家"
                {...formItemLayout}
              >
                {getFieldDecorator('busRgnTpCd', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 32, message: '不能超过32个字' },
                  ],
                  initialValue: busRgnTpCd,
                })(
                  <Input placeholder="请输入营业国家" />
                )}
              </FormItem>

              <FormItem
                label="注册地址"
                {...formItemLayout}
              >
                {getFieldDecorator('regAddress', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 64, message: '不能超过64个字' },
                  ],
                  initialValue: regAddress,
                })(
                  <Input placeholder="请输入注册地址" />
                )}
              </FormItem>
              <FormItem
                label="营业地址邮编"
                {...formItemLayout}
              >
                {getFieldDecorator('runAddrPost', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 6, message: '不能超过6个字' },
                  ],
                  initialValue: runAddrPost,
                })(
                  <Input placeholder="请输入营业地址邮编" />
                )}
              </FormItem>
              <FormItem
                label="兼营业务"
                {...formItemLayout}
              >
                {getFieldDecorator('partOper', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 100, message: '不能超过100个字' },
                  ],
                  initialValue: partOper,
                })(
                  <Input placeholder="请输入兼营业务" />
                )}
              </FormItem>
            </Col>
            <Col {...thirdLayout}>
              <FormItem
                label="所属公司"
                {...formItemLayout}
              >
                {getFieldDecorator('owned', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 32, message: '不能超过32个字' },
                  ],
                  initialValue: owned,
                })(
                  <Input placeholder="请输入所属公司" />
                )}
              </FormItem>
              <FormItem
                label="业务联系人手机"
                {...formItemLayout}
              >
                {getFieldDecorator('phone', {
                  rules: [
                    { ...fieldRequired('业务联系人手机') },
                    { max: 64, message: '不能超过11个字' },
                  ],
                  initialValue: phone,
                })(
                  <Input placeholder="请输入业务联系人手机" />
                )}
              </FormItem>
              <FormItem
                label="签约机构"
                {...formItemLayout}
              >
                {getFieldDecorator('signOrg', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 8, message: '不能超过8个字' },
                  ],
                  initialValue: signOrg,
                })(
                  <Input placeholder="请输入签约机构" />
                )}
              </FormItem>
              <FormItem
                label="组织机构代码号"
                {...formItemLayout}
              >
                {getFieldDecorator('organizationCode', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 32, message: '不能超过32个字' },
                  ],
                  initialValue: organizationCode,
                })(
                  <Input placeholder="请输入组织机构代码号（3证之一）" />
                )}
              </FormItem>
              <FormItem
                label="传真"
                {...formItemLayout}
              >
                {getFieldDecorator('fax', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 32, message: '不能超过32个字' },
                  ],
                  initialValue: fax,
                })(
                  <Input placeholder="请输入传真" />
                )}
              </FormItem>
              <FormItem
                label="所在省份/州"
                {...formItemLayout}
              >
                {getFieldDecorator('provinceTpCd', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 32, message: '不能超过32个字' },
                  ],
                  initialValue: provinceTpCd,
                })(
                  <Input placeholder="请输入所在省份/州" />
                )}
              </FormItem>
              <FormItem
                label="所在城市"
                {...formItemLayout}
              >
                {getFieldDecorator('citycode', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 32, message: '不能超过32个字' },
                  ],
                  initialValue: citycode,
                })(
                  <Input placeholder="请输入所在城市" />
                )}
              </FormItem>
              <FormItem
                label="注册地址邮编"
                {...formItemLayout}
              >
                {getFieldDecorator('regAddrPost', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 6, message: '不能超过6个字' },
                  ],
                  initialValue: regAddrPost,
                })(
                  <Input placeholder="请输入注册地址邮编" />
                )}
              </FormItem>
              <FormItem
                label="主营业务"
                {...formItemLayout}
              >
                {getFieldDecorator('mainOper', {
                  rules: [
                    { ...fieldCheckSpace },
                    { max: 32, message: '不能超过32个字' },
                  ],
                  initialValue: mainOper,
                })(
                  <Input placeholder="请输入主营业务" />
                )}
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Modal>
    );
  }
}

代码中使用visible={modalUpdateDetail} 来进行判断弹框是否展示，进行测试的时候发现，

如果第一步操作执行的是修改操作，一些默认值填充上去，如果不作处理，第二部执行新增操作的时候，会把第一个默认的值带着，导致新增弹框弹出来的时候form表单中就是数值，效果体验特别不好，

后面发现在Modal文件里面添加componentWillReceiveProps中处理报表重置，就可以刷新form表单

componentWillReceiveProps(nextProps) {
    if (!nextProps.modal.modalUpdateDetail) {
      this.props.form.resetFields();
    }
  }