Rest Admin Doc
AdminCreateEditFieldsFiltersForms<SimpleForm><TabbedForm>Создание собственной формыInputsListResourceShow

Компоненты <Forms>

  • <Form>
  • <SimpleForm>
  • <TabbedForm>

<SimpleForm>

Props

PropsТип
initialValue (required)object
handleSubmit (optional)(values) => void
actions (optional)React Component

Пример использования

Компонент <SimpleForm> используется только как потомок для <Create> или <Edit>

<Create>
    {(createProps) => (
        <SimpleForm
            {...createProps}
            initialValue={{
                title: '',
                body: '',
                date: '',
            }}
        >
            <Space direction="vertical">
                <TextInput label="Title" name="title" placeholder="Enter title" />
                <TextInput label="Body" name="body" placeholder="Enter body" />
                <DateInput name="date" />
            </Space>
        </SimpleForm>
    )}
</Create>

<TabbedForm>

Props

PropsТип
initialValue (required)object
handleSubmit (optional)(values) => void
defaultActiveKey (optional)string

Пример использования

Компонент <TabbedForm> используется только как потомок для <Create> или <Edit>. Компонент <TabbedForm> принимает обязательного потомка <FormTab>, который нужен для создание структуры табов.

<TabbedForm
    initialValue={{
        text: "",
        text2: "",
    }}
    {...props}
    defaultActiveKey="form"
>
    <FormTab tab="Tab 1" key="form">
        <TextInput
            name="text"
            label="Text"
        />
    </FormTab>
    <FormTab tab="Tab 2" key="content">
        <TextInput
            name="text2"
            label="Text 2"
        />
    </FormTab>
</TabbedForm>

Создание собственной формы

Для создание собственной формы нужно использовать компонент <Form>, передавая в него параметры:

  • handleSubmit - который будет являться onSubmitHandler
  • initialValue - объект необходимый для создания формы с помощью Formik

В потомках можно передавать абсолютно любую структура, главное чтобы в итоге был возвращен <Input> компонент.

Компонент <Form> возвращает форму созданную с помощью Formik

<Form
    handleSubmit={handleSubmit}
    initialValue={initialValue}
>
      <Space direction="vertical">
        {children}
        {actions || <SaveButton message="action.save" />}
      </Space>
    </Form>