Antd-form-data NPM

安装

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;