antd form list赋值

1 篇文章 0 订阅
	...
	const  xxx = ()=>{
		let value= 1
		 const fields = form.getFieldsValue();
	    const { names } = fields;
	    Object.assign(names[index], { checked:value });
	    form.setFieldsValue({ names });
	}
	....
    <Form
        name="selects"
        onFinish={onFinish}
        autoComplete="off"
        form={form}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 16 }}
      >
      ....
      <Form.List
          name="names"
          rules={[
            {
              validator: async (_, names) => {
                if (!names || names.length < 2) {
                  return Promise.reject(new Error('至少两个选项'));
                }
              },
            },
          ]}
        >
          {(fields, { add, remove }, { errors }) => (
            <>
              {fields.map(({ key, name, ...restField }, index) => (
                <Space
                  key={index}
                  style={{
                    display: 'flex',
                    marginBottom: 8,
                  }}
                  align="baseline"
                >
                  <Form.Item
                    {...restField}
                    label={ topicList[index]}
                    name={[index, 'first']}
                    rules={[
                      {
                        required: true,
                        message: '请输入' + topicList[index],
                      },
                    ]}
                  >
                    <Input placeholder={'请输入' + topicList[index]} />
                  </Form.Item>
                  <Form.Item
                    {...restField}
                    label="类型"
                    name={[index, 'last']}
                    rules={[
                      {
                        required: true,
                        message: '请选择',
                      },
                    ]}
                  >
                    <Input placeholder={'请输入' + topicList[index]} />
                  </Form.Item>
                  //hidden  隐藏Form.Item
                  <Form.Item hidden name={[index, 'checked']}>
                    <Input />
                  </Form.Item>
                  <MinusCircleOutlined onClick={() => remove(index)} />
                </Space>
              ))}
              <Form.Item>
                <Button
                  type="dashed"
                  onClick={() => add()}
                  block
                  icon={<PlusOutlined />}
                  disabled={fields.length >= 4}
                >
                  添加
                </Button>
                <Form.ErrorList errors={errors} />
              </Form.Item>
            </>
          )}
        </Form.List>
        ....
      

Antd表单列表创建一个item对象数组。则有必要定位对象在数组中的位置,该数组包含将改变值的项。

返回表单项的所有值:

const fields = form.getFieldsValue()

检索包含表单列表对象的数组:

const {names} = fields

传递对象在数组中的位置,并将该项更改为新值:

Object.assign(names[key], {checked: value})

然后将新的数组值传递给表单:

form.setFieldsValue({names})
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值