@01group/form-builder 中文文档教程

Question

@01group/form-builder

这是一个轻量级的 React Hook 库，用于简化构建 formik 表单的方法。

Story behind

在我们的案例中，我们经常发现我们的开发过程是夫妻为了建立形式而进行的过程。

我们找到了一种更好的方法来提高效率。

Installation

yarn add @01group/form-builder

或者如果你更喜欢选择 npm

npm install -S @01group/form-builder

Usage

这个主库正在使用一个反应钩子 useZeroForm。 它将返回 fields 和 values。

Description

fields: 用于处理表单的对象字段列表

values: 值的对象，可以是在formik<中填充initialValues /code>

Example

Nb. 以下是我们的方法。 如果您认为这不够适合您，您可以使用自己的。

import { Formik, Form } from 'formik'
import { useZeroForm, ZeroFormTypes } from '@01group/form-builder';

export const DATA = {
  name: '',
  province_id: '',
  city_id: '',
  date_of_birth: '',
};

export const generalOptions = {
  name: {
    type: 'text',
    label: 'Your name',
    isRequired: true,
  },
  province_id: {
    type: 'select',
    label: 'Province',
    placeholder: 'Select a province',
  },
  city_id: {
    type: 'select',
    label: 'City',
    placeholder: 'Select a city',
  },
};

export function Example() {
  const { fields, values } = useZeroForm({ data: DATA as ZeroFormTypes, options: generalOptions });

  return (
    <Formik
      initialValues={values}
      validationSchema={validationSchema}
      onSubmit={handleSubmit}
      enableReinitialize
    >
      <Form>
        {(fields ?? []).map((field, i) => (
          <GenerateField key={i} isReadonly={isReadonly} {...field} />
        ))}
      </Form>
    </Formik>
  )
}

export function GenerateField(props: ZeroFieldItem) {
  const inputProps = {
    id: props.name,
    name: props.name,
    label: props.label,
    placeholder: props.placeholder,
    isRequired: props.isRequired,
    isReadOnly: props.isReadonly,
  };
  const selectProps = {
    ...inputProps,
    items: props.selectOptions ?? [],
  };

  const elements: Partial<Record<Partial<ZeroFieldTypes>, JSX.Element>> = {
    select: <Select {...selectProps} />,
    text: <TextField {...inputProps} />,
    row: <Textarea {...inputProps} />,
    file: <Dropzone width="full" {...inputProps} />,
  };

  return elements[props.type] ?? <TextField {...inputProps} />;
}