antd的form.list中如何setFieldsValue

最新推荐文章于 2024-11-16 21:52:49 发布

Epawn

最新推荐文章于 2024-11-16 21:52:49 发布

阅读量8.8k

点赞数 8

文章标签： javascript reactjs ant

原文链接：https://codesandbox.io/s/vigorous-maxwell-zhxro?file=/src/App.js:0-4858

版权

这篇博客详细介绍了如何在React应用中使用Ant Design Pro Form组件来实现动态表单，特别是处理Form.List中的数据管理。通过示例代码展示了如何在表单中添加、删除区域，并在区域中配置类型数据，包括设置区域类型选择及区域类型数据配置。同时，文章指出在使用setFieldsValue更新NamePath格式的数据时遇到的问题及其解决方案。

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

主要就这几行代码：

const newData = [
  ...getFieldValue("areaData")
];
newData[field.key] = {
  ...newData[field.key],
  typeData: testData
};
setFieldsValue({
  areaData: newData
});

详情看下面：

import React, { useState } from "react";
import "./styles.css";
import { Button, Drawer, Form, Card } from "antd";
import "antd/dist/antd.css";
import Proform, { ProFormSelect } from "@ant-design/pro-form";
const areaTypeList = {
  "1": "测试1",
  "2": "测试2"
};
export default function App() {
  const [visible, setVisible] = useState(false);
  const [dynamicAreaForm] = Form.useForm();
  return (
    <div className="App">
      <Button type="primary" onClick={() => setVisible(true)}>
        新增
      </Button>
      <Drawer visible={visible} width={400} onCancel={() => setVisible(false)}>
        <Proform
          scrollToFirstError={true}
          style={{ marginTop: 36 }}
          name="dynamicArea"
          form={dynamicAreaForm}
          autoComplete="off"
          onFinish={async (vlaues) => {
            console.log("area content", vlaues);
            // onOk && onOk(vlaues.areaData ? vlaues.areaData : []);
          }}
        >
          <Form.List name="areaData">
            {(fields, { add, remove }) => {
              return (
                <>
                  {fields.map((field) => (
                    <Card
                      key={field.key}
                      bordered
                      style={{ marginBottom: 16 }}
                      extra={
                        <Button type="link" onClick={() => remove(field.name)}>
                          删除
                        </Button>
                      }
                      title="自定义区域内容"
                    >
                      <ProFormSelect
                        label="区域类型"
                        name={[field.name, "type"]}
                        fieldKey={[field.fieldKey, "type"]}
                        valueEnum={areaTypeList}
                        rules={[
                          { required: true, message: "区域类型不能为空!" }
                        ]}
                      />

                      <Form.Item shouldUpdate noStyle>
                        {({ getFieldValue, setFieldsValue }) => {
                          return (
                            getFieldValue(["areaData", field.name, "type"]) && (
                              <Form.Item label="区域类型数据配置">
                                <Form.Item
                                  noStyle
                                  initialValue={[]}
                                  name={[field.name, "typeData"]}
                                  fieldKey={[field.fieldKey, "typeData"]}
                                  rules={[
                                    {
                                      required: true,
                                      message: "区域类型数据配置不能为空!"
                                    }
                                  ]}
                                >
                                  <Button
                                    onClick={() => {
                                      const testData = [
                                        "选中的数据1",
                                        "选中的数据2",
                                        "选中的数据3"
                                      ];
                                      /**
                                       * 在Form.List下可以新增区域，每个区域存在区域类型数据配置栏位
                                       * 点击请选择在实际场景中会出现一个新的表格然后选择数据内容，使用testData模拟
                                       * 区域类型数据配置栏位 name = typeData,参考getFieldValue(["areaData", field.name, "type])
                                       * 但是setFieldsValue 对象参数key不支持NamePath格式，无法赋值
                                       */
                                      const newData = [
                                        ...getFieldValue("areaData")
                                      ];
                                      newData[field.key] = {
                                        ...newData[field.key],
                                        typeData: testData
                                      };
                                      setFieldsValue({
                                        areaData: newData
                                      });
                                    }}
                                  >
                                    请选择
                                  </Button>
                                </Form.Item>
                              </Form.Item>
                            )
                          );
                        }}
                      </Form.Item>
                    </Card>
                  ))}

                  <Form.Item>
                    <Button type="dashed" onClick={() => add()} block>
                      新增区域
                    </Button>
                  </Form.Item>
                </>
              );
            }}
          </Form.List>
        </Proform>
      </Drawer>
    </div>
  );
}