安装

npm install --save antd-form-data

使用

import AntdForm, { FORM_TYPE } from "antd-form-data";

例子

例一、基本使用

antd-form-data 的表单项属性 formItems。

import React, { useState } from "react";
import AntdForm, { FORM_TYPE } from "antd-form-data";

const App = () => {
  const [formItems, setFormItems] = useState([
    {
      label: "Username",
      name: "username",
      type: FORM_TYPE.INPUT,
      rules: [{ required: true, message: "Please input your username!" }],
    },
    {
      label: "Password",
      name: "password",
      type: FORM_TYPE.PASSWORD,
      rules: [{ required: true, message: "Please input your password!" }],
    },
    {
      name: "remember",
      type: FORM_TYPE.CHECKBOX,
      options: [
        {
          label: "Remember me",
          value: true,
        },
      ],
      mode: "single",
    },
  ]);

  const onFinish = (values) => {
    console.log("Success:", values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  return (
    <AntdForm
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 16,
      }}
      style={{
        maxWidth: 600,
      }}
      okText={"Submit"}
      cancelButtonProps={{ visible: false }}
      initialValues={{
        remember: true,
      }}
      formItems={formItems}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    />
  );
};
export default App;

例二、表单方法调用

表单（Form）实例（FormInstance）的表单项（setFormItems）方法用于更新表单项（FormItems）中的（field）属性。

import React, { useState } from "react";
import { Form } from "antd";
import AntdForm, { FORM_TYPE } from "antd-form-data";

const App = () => {
  const [form] = Form.useForm();
  const [formItems, setFormItems] = useState([
    {
      label: "Note",
      name: "note",
      type: FORM_TYPE.INPUT,
      rules: [{ required: true }],
    },
    {
      label: "Gender",
      name: "gender",
      type: FORM_TYPE.SELECT,
      options: [
        {
          label: "male",
          value: "male",
        },
        {
          label: "female",
          value: "female",
        },
        {
          label: "other",
          value: "other",
        },
      ],
      placeholder: "Select a option and change input text above",
      allowClear: true,
      rules: [{ required: true }],
    },
    {
      label: "Customize Gender",
      name: "customizeGender",
      rules: [{ required: true }],
      visible: false,
    },
  ]);

  const onFinish = (values) => {
    console.log("Success:", values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  const onFill = () => {
    form.setFieldsValue({
      note: "Hello world!",
      gender: "male",
    });
  };

  return (
    <AntdForm
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 16,
      }}
      style={{
        maxWidth: 600,
      }}
      okText={"Submit"}
      cancelText={"Reset"}
      actionBtns={[
        {
          type: "link",
          text: "Fill form",
          onClick: onFill,
        },
      ]}
      form={form}
      initialValues={{}}
      formItems={formItems}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    />
  );
};
export default App;

例三、表单布局

import React, { useState } from "react";
import { Form } from "antd";
import AntdForm, { FORM_TYPE } from "antd-form-data";

const formLabelCol = {
  horizontal: { span: 8 },
  vertical: null,
  inline: null,
};

const formWrapperCol = {
  horizontal: { span: 14 },
  vertical: null,
  inline: null,
};

const formStyleMaxWidth = {
  horizontal: 600,
  vertical: 600,
  inline: "none",
};

const App = () => {
  const defInitialValues = { layout: "horizontal" };
  const [form] = Form.useForm();
  const [formItems, setFormItems] = useState([
    {
      label: "Form Layout",
      name: "layout",
      type: FORM_TYPE.RADIO,
      optionType: "button",
      options: [
        {
          label: "Horizontal",
          value: "horizontal",
        },
        {
          label: "Vertical",
          value: "vertical",
        },
        {
          label: "Inline",
          value: "inline",
        },
      ],
      buttonStyle: "solid",
    },
    {
      label: "Field A",
      name: "fieldA",
      type: FORM_TYPE.INPUT,
      placeholder: "input placeholder",
    },
    {
      label: "Field B",
      name: "fieldB",
      type: FORM_TYPE.INPUT,
      placeholder: "input placeholder",
    },
  ]);
  const formValues =
    Form.useWatch((values) => values, form) ?? defInitialValues;

  const onFinish = (values) => {
    console.log("Success:", values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  return (
    <AntdForm
      labelCol={formLabelCol[formValues.layout]}
      wrapperCol={formWrapperCol[formValues.layout]}
      style={{
        maxWidth: formStyleMaxWidth[formValues.layout],
      }}
      layout={formValues.layout}
      okText={"Submit"}
      cancelButtonProps={{ visible: false }}
      form={form}
      initialValues={defInitialValues}
      formItems={formItems}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    />
  );
};

export default App;

例四、自定义组件

自定义组件需要提供 onChange 事件，并且这个事件返回当前绑定的值

import React, { useState } from "react";
import { Form, Select, Input } from "antd";
import AntdForm, { FORM_TYPE } from "antd-form-data";

const ProvinceStreet = (props) => {
  const { form, labelName = "", onChange = (value) => {} } = props;

  const handleChange = (name, e) => {
    let values = form.getFieldsValue(true);
    let curValue = values[labelName] ?? {};
    curValue[name] = e?.target?.value ?? e;
    onChange(curValue);
  };

  return (
    <>
      <Select
        name="province"
        style={{
          width: "50%",
        }}
        placeholder="Select province"
        onChange={handleChange.bind(this, "province")}
      >
        <Option value="Zhejiang">Zhejiang</Option>
        <Option value="Jiangsu">Jiangsu</Option>
      </Select>
      <Input
        name="street"
        style={{
          width: "calc(50% - 8px)",
          margin: "0 0 0 8px",
        }}
        placeholder="Input street"
        onChange={handleChange.bind(this, "street")}
      />
    </>
  );
};

const App = () => {
  const [form] = Form.useForm();
  const [formItems, setFormItems] = useState([
    {
      label: "Username",
      name: "username",
      type: FORM_TYPE.INPUT,
    },
    {
      label: "Address",
      name: "province-street",
      type: FORM_TYPE.CUSTOM,
      render: () => <ProvinceStreet labelName="province-street" form={form} />,
    },
  ]);

  const onValuesChange = (changedValues, allValues) => {
    console.log(changedValues, allValues);
  };

  const onFinish = (values) => {
    console.log("Success:", values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  const onReset = () => {
    form.resetFields();
  };

  return (
    <AntdForm
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 16,
      }}
      style={{
        maxWidth: 600,
      }}
      okText={"Submit"}
      cancelVisible={false}
      form={form}
      initialValues={{}}
      formItems={formItems}
      onValuesChange={onValuesChange}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      onReset={onReset}
      autoComplete="off"
    />
  );
};
export default App;

API

Form

|-- 参数 -- |-- 说明 --|-- 类型 --|-- 默认值 --|-- 版本 --| | formItems | 表单项描述信息 | array | [] | | | formItemsCfg | 表单项绑定事件处理 | object | - | | | isAction | 用于是否显示操作按钮 | boolean | true | | | okText | 确认按钮文字 | ReactNode | 确认 | | | okVisible | 是否显示确认按钮 | boolean | true | | | okButtonProps | ok 按钮 props | ButtonProps | - | | | cancelText | 取消按钮文字 | ReactNode | 取消 | | | cancelVisible | 是否显示取消按钮 | boolean | true | | | cancelButtonProps | cancel 按钮 props | ButtonProps | - | | | actionBtns | 其他操作按钮 | Buttons | - | |

Form.Provider

FormInstance

|-- 名称 --|-- 说明 --|-- 类型 --|-- 版本 --| | setFormItems | 用于更新表单项 | (fields) => void | |

FORM_TYPE

|-- 枚举 -- |-- 说明 --|-- 类型 --| | INPUT | 输入框 | 文档(https://ant-design.antgroup.com/components/input-cn#input) | | PASSWORD | 密码框 | 文档(https://ant-design.antgroup.com/components/input-cn#components-input-demo-password-input) | | TEXTAREA | 富文本 | 文档(https://ant-design.antgroup.com/components/input-cn#inputtextarea) | | INPUTNUMBER | 数字输入框 | 文档(https://ant-design.antgroup.com/components/input-number-cn#api) | | AUTOCOMPLETE | 自动完成 | 文档(https://ant-design.antgroup.com/components/auto-complete-cn#api) | | SWITCH | 开关 | 文档(https://ant-design.antgroup.com/components/switch-cn#api) | | RADIO | 单选框 | 文档(https://ant-design.antgroup.com/components/radio-cn#api) | | CHECKBOX | 多选框 | 文档(https://ant-design.antgroup.com/components/checkbox-cn#api) | | SELECT | 选择器 | 文档(https://ant-design.antgroup.com/components/select-cn#api) | | CASCADER | 级联选择 | 文档(https://ant-design.antgroup.com/components/cascader-cn#api) | | DATEPICKER | 日期选择器 | 文档(https://ant-design.antgroup.com/components/date-picker-cn#api) | | RANGEDATEPICKER | 日期范围选择器 | 文档(https://ant-design.antgroup.com/components/date-picker-cn#components-date-picker-demo-preset-ranges) | | TIMEPICKER | 时间选择器 | 文档(https://ant-design.antgroup.com/components/time-picker-cn#api) | | RANGETIMEPICKER | 时间范围选择器 | 文档(https://ant-design.antgroup.com/components/time-picker-cn#time-picker-demo-range-picker) | | COLORPICKER | 颜色选择器 | 文档(https://ant-design.antgroup.com/components/color-picker-cn#api) | | SLIDER | 滑动输入条 | 文档(https://ant-design.antgroup.com/components/slider-cn#api) | | RATE | 评分 | 文档(https://ant-design.antgroup.com/components/rate-cn#api) | | TREESELECT | 树选择 | 文档(https://ant-design.antgroup.com/components/tree-select-cn#api) | | UPLOAD | 上传 | 文档(https://ant-design.antgroup.com/components/upload-cn#api) | | MARKDOWN | 编辑器 | -- | | CUSTOM | 自定义 | -- |

微信号

联系作者：qianduanka

网站

https://www.qianduanka.com

前端咖公众号

前端咖小程序