antd design Form动态增减表单项(多个),组装数据及编辑回显,选择初始值,控制添加减少表单项数量等

新增效果图如下

在这里插入图片描述
编辑效果图如下
在这里插入图片描述
代码如下

const {
      salesFollow: { info },
      form: { getFieldDecorator, getFieldValue },
    } = this.props;

const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 12 },
    };
    getFieldDecorator('keys', { initialValue: info.timeList ? info.timeList : [] });
    const keys = getFieldValue('keys') ? getFieldValue('keys') : [];
    const paramFormItems = keys.map((k, index) => (
      <Row key={k.id}>
        <FormItem
          style={{marginBottom:0}}
          {...(formItemLayout)}
          label={getFieldDecorator(`paramTime_${k.id}`, {
            initialValue: k.startTime ? moment(k.startTime) : null,
          })(
            <DatePicker
              format='YYYY-MM-DD'
              placeholder="请选择日期"
            />
          )}
          key={k.index || k.index === 0 ? k.index : k}
          required={false}
          colon={false}
        >
          <Row type="flex">
            <Col>
              <FormItem style={{ marginLeft: 10, marginBottom:0 }}>
                {getFieldDecorator(`paramStart_${k.id}`, {
                  initialValue: k.startTime ? moment(k.startTime) : null,
                })(
                  <TimePicker
                    format=" HH:mm "
                    placeholder="开始时间"

                  />
                )}
              </FormItem>
            </Col>
            <Col>
              <FormItem style={{ marginLeft: 10, marginBottom:0 }}>
                {getFieldDecorator(`paramEnd_${k.id}`, {
                  initialValue: k.endTime ? moment(k.endTime) : null,
                })(
                  <TimePicker
                    format=" HH:mm "
                    placeholder="结束时间"
                  />
                )}
              </FormItem>
            </Col>
            <Col>
              <FormItem style={{marginBottom:0}}>
                <Icon
                  style={{ marginLeft: 10 }}
                  className="dynamic-delete-button"
                  type="minus-circle-o"
                  onClick={() => this.remove(index)}
                />
              </FormItem>
            </Col>
          </Row>
        </FormItem>
      </Row>
    ));
             <Row span={24} style={myStyle.rowStyle}>
                <Col span={24}>可上课时间:
                  {
                    paramFormItems
                  }
                </Col>
              </Row>
              <Row span={24} style={myStyle.rowStyle}>
                <Col span={8}>
                  <Button type="dashed" style={{ width: '50%' }} onClick={this.add}>
                    <Icon type="plus" /> 添加可上课时间
                  </Button>
                </Col>
              </Row>

增加,减少表单项方法

    remove = (k) => {
    // can use data-binding to get
    const keys = this.props.form.getFieldValue('keys');
    _.remove(keys,(d, i) => i === k );
    // We need at least one passenger
    // can use data-binding to set
    this.props.form.setFieldsValue({
      keys,
    });
  };

  add = () => {
    // can use data-binding to get
    const keys = this.props.form.getFieldValue('keys');
    const nextKeys = keys.concat([{ id: uuid }]);
    uuid++;
    // can use data-binding to set
    // important! notify form to detect changes
    this.props.form.setFieldsValue({
      keys: nextKeys,
    });
  };

控制添加表单的个数可以通过控制keys的长度来实现

  add = () => {
    const { form } = this.props;
    // can use data-binding to get
    const keys = form.getFieldValue('keys');
    if (keys.length === 1) {
      message.error("最多只能添加一个!");
      return;
    }
    const nextKeys = keys.concat([{ id: uuid }]);
    // can use data-binding to set
    // important! notify form to detect changes
    form.setFieldsValue({
      keys: nextKeys,
    });
  };
  remove = (k) => {
    // can use data-binding to get
    const keys = this.props.form.getFieldValue('keys');
     if (keys.length <= 1) {
      message.error('请至少保留一个');
      return;
    }
    _.remove(keys,(d, i) => i === k );
    // We need at least one passenger
    // can use data-binding to set
    this.props.form.setFieldsValue({
      keys,
    });
  };

提交表单组装数据方法

   handleSubmit = () => {
    const { form, } = this.props;
    form.validateFields((errors, values) => {
      const timeList = [];
      for (let i = 0; i <= uuid; i++) {
        if (values[`paramTime_${i}`]) {
          if (!values[`paramStart_${i}`] || !values[`paramEnd_${i}`]) {
            message.error('请选择上课时间');
            return;
          }
          const time = values[`paramTime_${i}`] ? moment(values[`paramTime_${i}`]).format('YYYY-MM-DD') : null;
          const start = values[`paramStart_${i}`] ? moment(values[`paramStart_${i}`]).format('HH:mm:ss') : null;
          const end = values[`paramEnd_${i}`] ? moment(values[`paramEnd_${i}`]).format('HH:mm:ss') : null;
          timeList.push({
            queryStartDate: `${time } ${ start}`,
            queryEndDate: `${time } ${ end}`,
          });
        }
      }
      console.info('timeList', timeList);
    });
  };

数据
在这里插入图片描述
组装数据前
在这里插入图片描述
组装数据后
在这里插入图片描述
引用到的组件

 import moment from 'moment';
 import { Button, Card,Cascader, Row, Col, message, DatePicker, Input, Form, Icon } from 'antd';
 import TimePicker from 'antd/es/time-picker';
 const FormItem = Form.Item;
 let uuid = 100000;

编辑回显数据如下
在这里插入图片描述
在这里插入图片描述
因为用的是时间控件,所以提交和编辑回显的时候都需要做时间格式化处理,如果是其他控件可以省略这一步。

新增表单时控制初始化数据可以通过控制keys的长度来实现,如默认显示2个
在这里插入图片描述

getFieldDecorator('keys', { initialValue: info.timeList.length > 0 ? info.timeList : [1,2] });
  • 3
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
### 回答1: 在ant Design中,我们可以使用Form组件和Form.Item组件来创建表单动态增减表单可以通过state来控制表单数量,然后根据state中的值来渲染对应数量表单。 首先,我们需要设置一个state来保存表单数量,可以使用数组来保存每个表单的值,例如: ```javascript state = { formItems: [{ id: 1, value: '' }] }; ``` 然后,我们可以通过map函数来遍历表单的数组,动态生成对应数量表单: ```javascript const { formItems } = this.state; {formItems.map(item => ( <Form.Item key={item.id}> {getFieldDecorator(`item-${item.id}`, { initialValue: item.value })(<Input />)} </Form.Item> ))} ``` 当需要增加减少表单数量时,我们可以通过点击按钮来触发对应的函数,例如增加表单的函数可以这样实现: ```javascript addFormItem = () => { const { formItems } = this.state; const newFormItem = { id: formItems.length + 1, value: '' }; this.setState({ formItems: [...formItems, newFormItem] }); } ``` 删除表单的函数可以这样实现: ```javascript removeFormItem = (id) => { const { formItems } = this.state; const newFormItems = formItems.filter(item => item.id !== id); this.setState({ formItems: newFormItems }); } ``` 在表单提交时,我们可以通过getFieldsValue函数获取到表单的值并进行提交操作: ```javascript handleSubmit = (e) => { e.preventDefault(); const { form, formItems } = this.props; form.validateFields((err, values) => { if (!err) { const formValues = Object.keys(values).reduce((result, key) => { const id = parseInt(key.split('-')[1]); const value = values[key]; const formItem = formItems.find(item => item.id === id); result.push({ id, value }); return result; }, []); console.log(formValues); // 进行提交操作 } }); } ``` 以上就是使用antd实现动态增减表单并设置表单回显的方法,通过动态管理state中的表单数组来动态渲染、增减表单,通过getFieldsValue函数获取表单的值并进行提交操作。 ### 回答2: Antd 是一款基于 React 的 UI 组件库,它提供了一系列易于使用和美观的表单组件。在使用 Antd 动态增减表单时,我们可以很容易地实现表单的设置和回显。 首先,我们可以使用 AntdForm 组件来创建表单。在表单的设置方面,我们可以通过调用 Form 的 getFieldDecorator 方法来设置表单初始值、校验规则和事件处理函数等。 接着,当需要动态增减表单时,我们可以利用 Antd 的 Button 组件来触发增减操作。通过在点击事件中操作表单数据(如数组的 push、splice 等方法),我们可以动态添加或删除表单。 对于表单回显,我们可以在表单初始化时将表单值设置为从后端获取的数据。这样,当我们动态增减表单后,原有的表单会自动填充之前的值。这个过程可以通过在 Form 组件的 initialValue 属性中设置从后端获取的数据来实现。 当用户提交表单时,我们可以通过调用 Antd 提供的 Form 的方法(如 validateFieldsAndScroll)来验证并获取表单数据。然后,我们可以将表单数据提交到后端进行处理。 总结起来,通过使用 Antd 提供的 Form 组件结合动态增减表单的操作,我们可以很方便地设置和回显表单。同时,借助 Antd 的其他组件和方法,我们还能够实现表单的校验、事件处理和提交等功能。Antd 提供了一整套完善的表单解决方案,可供我们在各种场景中灵活使用。 ### 回答3: antd是一个非常流行的React UI组件库,提供了丰富的表单组件和功能。实现动态增减表单并设置表单回显有以下几个步骤: 1. 设置表单初始值:在使用antd表单组件时,可以通过`initialValues`属性设置表单初始值。假设有一个列表数据`list`,每个元素包含字段`name`和`value`,可以将其转化为初始值对象`initialValues`,其中每个字段的值对应表单初始值。 2. 动态增减表单:通过antd提供的`Form.List`组件,可以实现多个表单动态增减。在表单中需要编辑和显示列表数据时,可以使用`map()`方法循环渲染表单,并使用`remove()`方法删除不需要的表单。 3. 表单的读写绑定:在使用`Form.List`组件循环渲染表单时,可以使用`name`属性将每个表单与列表数据的对应字段关联起来,实现读写绑定。这样,当表单的值发生变化时,列表数据的对应字段值也会随之更新。 4. 表单回显:在设置表单初始值的基础上,antd表单组件会自动将初始值回显表单中,用户可以看到之前已经填写的内容。当删除或添加表单时,表单组件会自动处理表单的重新渲染和回显。 总结:通过设置表单初始值、使用`Form.List`组件实现动态增减表单表单的读写绑定以及antd的自动回显功能,可以实现antd动态增减表单并设置表单回显的需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值