• 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,否则会导致指定初始值设置失败。

  • 相关阅读:
    北风设计模式课程---行为型模式总结
    北风设计模式课程---21、中介者模式
    kindeditor-网页文字编辑
    CSDN挑战编程——《金色十月线上编程比赛第二题:解密》
    Unreal Engine 4 创建Destructible Mesh(可破坏网格)
    android弹出时间选择框
    mac_Mac环境下怎样编写HTML代码?
    PL/SQL 游标的使用
    [cocos2dx笔记008]cocos2d 用luabridge手动绑定类
    Codeforces Round #274 (Div. 2)
  • 原文地址:https://www.cnblogs.com/uimeigui/p/15351148.html
Copyright © 2020-2023  润新知