Как написать вложенную форму с муравьиным дизайном в React

Создание форм с помощью Ant Design — это простой процесс, если вы усвоите основы. Ключ к пониманию структуры вашей формы лежит в параметре name, который определяет, как будут организованы ваши данные. В этом блоге мы рассмотрим различные сценарии, которые помогут вам легко перемещаться по вложенным формам.

Базовая структура формы

Начнем с базовой структуры формы. Если вам нужен такой формат:

{
  username: "lin gash",
  password: "123456",
}

Ваш код будет выглядеть так:

<Form.Item label="Username" name="username">
  <Input />
</Form.Item>
<Form.Item label="Password" name="password">
  <Input />
</Form.Item>

Формат вложенного объекта

Рассмотрим более сложный формат, например:

{
  userInfo: {
     username: "lin gash"
     phoneNum: "0972842838"
   },
}

Для этой структуры атрибут name адаптируется следующим образом:

<Form.Item label="Username" name={['userInfo', 'username']}>
  <Input />
</Form.Item>
<Form.Item label="Phone Number" name={['userInfo', 'phoneNum']}>
  <Input />
</Form.Item>

Здесь вы используете последовательность [‘key’, ‘property’] для атрибута name.

Формат массива объектов

При работе с массивом таких объектов, как:

{
  userFriends: [
    {
     username: "lin gash"
     phoneNum: "0972842838"
     },
     {
     username: "hein min htet"
     phoneNum: "0998247237"
     },
  ],
}

Шаблон кода немного меняется:

<Form.Item label="Username" name={['userFriends', 0, 'username']}>
  <Input />
</Form.Item>
<Form.Item label="Phone Number" name={['userFriends', 0, 'phoneNum']}>
  <Input />
</Form.Item>
<Form.Item label="Username" name={['userFriends', 1, 'username']}>
  <Input />
</Form.Item>
<Form.Item label="Phone Number" name={['userFriends', 1, 'phoneNum']}>
  <Input />
</Form.Item>  

Здесь атрибут name соответствует шаблону ['arrayName', index, 'property'].

Элементы динамического массива

Для динамического управления элементами массива вы можете использовать Form.List. Вот как вы можете его использовать:

  <Form.List name="userFriends">
      {(fields,{ add , remove }) => (
        <div>
          {fields.map((field) => (
            <div key={field.name}>
              <Form.Item name={[field.name,"username"]}>
                <Input />
              </Form.Item>
              <Form.Item name={[field.name,"password"]}>
                <Input />
              </Form.Item>
            </div>
          ))}
          <Button onClick={()=> add()}>Add</Button>
        </div>
      )}
   </Form.List>

Используя Form.List, вы можете динамически добавлять и удалять элементы массива, сохраняя при этом непротиворечивую структуру.

И это завершает наше исследование вложенных форм Ant Design! С этим пониманием вы сможете с легкостью создавать формы различной сложности.