AntD为Form的List设置默认值 (antd form.list 设置默认值 )

import React from "react";
function demo() {
  const FormConfig = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };
  const [form] = Form.useForm();
  const data = "2,3"; //数据源

  /**
   * 适配器-可以根据自己的数据类型自行改变数据结构
   * @param {*} data
   * @returns
   */
  const trans_val = (data) => {
    let arr = data.split(",");
    let new_arr = [];
    new_arr = arr.map((item, index) => ({
      val: item, //设置字段,在form.list下的form.item中指定的字段值
      fieldKey: index,
      isListField: true,
      key: index,
      name: index,
    }));
    return new_arr;
  };

  useEffect(() => {
    form.setFieldsValue({
      trigger_conds_group: trans_val(data),
    });
  }, []);
  return (
    <div>
      <Form form={form} name="form_in_modal" hideRequiredMark={true}>
        <Form.List
          label="触发条件组合"
          name="trigger_conds_group"
          labelCol={FormConfig.labelCol.span}
          rules={[
            { required: true, message: "请输入触发条件" },
            ({ getFieldValue }) => ({
              validator(_, value) {
                if (!value || value?.length === 0) {
                  message.error("请添加触发条件");
                  return Promise.reject(new Error("请添加触发条件"));
                }
                return Promise.resolve();
              },
            }),
          ]}
        >
          {(fields, { add, remove }) => (
            <>
              {fields.map(({ key, name, fieldKey, ...restField }) => (
                <div
                  key={key}
                  style={{
                    display: "flex",
                    marginBottom: 8,
                    alignItems: "center",
                  }}
                >
                  <Form.Item
                    {...restField}
                    label="触发条件"
                    name={[name, "val"]}
                    fieldKey={[fieldKey, "val"]}
                    rules={[{ required: true, message: "请输入触发条件" }]}
                  >
                    <Input
                      placeholder="请输入触发条件"
                      addonAfter={
                        <MinusCircleOutlined
                          style={{ marginLeft: "8px" }}
                          onClick={() => remove(name)}
                        />
                      }
                    />
                  </Form.Item>
                </div>
              ))}
              <Form.Item
                wrapperCol={{
                  span: FormConfig.wrapperCol.span,
                  offset: FormConfig.labelCol.span,
                }}
              >
                <Button
                  type="dashed"
                  onClick={() => {
                    // add_trigger_h(add);
                    add();
                  }}
                  block
                  icon={<PlusOutlined />}
                >
                  添加触发条件
                </Button>
              </Form.Item>
            </>
          )}
        </Form.List>
      </Form>
    </div>
  );
}
export default demo;

注:这里面有个地方需要注意 form.list 下的form.item 表单中的input、Select元素不能用东西包裹,结构 form.item->Input,否则会导致指定初始值设置失败。

原文地址:https://www.cnblogs.com/uimeigui/p/15351148.html