Условная видимость полей

В библиотеке Ant Design управление условной видимостью полей формы реализуется с помощью компонентов Form и Form.Item, в сочетании с React state или методами самого компонента Form. Это позволяет динамически отображать или скрывать поля в зависимости от значений других полей, состояния формы или внешних данных.

Использование dependencies для реактивной видимости

Компонент Form.Item поддерживает свойство dependencies, которое позволяет отслеживать изменения значений других полей и реагировать на них.

Пример:

import { Form, Input, Sel ect } from 'antd';

const { Option } = Select;

<Form>
  <Form.Item name="type" label="Тип">
    <Select>
      <Option value="person">Физическое лицо</Option>
      <Option value="company">Компания</Option>
    </Select>
  </Form.Item>

  <Form.Item
    noStyle
    shouldUpdate={(prevValues, currentValues) => prevValues.type !== currentValues.type}
  >
    {({ getFieldValue }) => {
      return getFieldValue('type') === 'company' ? (
        <Form.Item name="companyName" label="Название компании" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
      ) : null;
    }}
  </Form.Item>
</Form>

Ключевые моменты:

  • noStyle убирает лишние обертки, чтобы не ломать верстку.
  • shouldUpdate позволяет оптимизировать ререндер и отслеживать только необходимые изменения.
  • Функция в children получает объект формы через render props и возвращает либо компонент поля, либо null.

Динамическое управление видимостью через состояние

Можно управлять видимостью полей через локальный state React, особенно когда условие зависит от внешних данных или асинхронных операций:

import { Form, Input, Checkbox } fr om 'antd';
import { useState } from 'react';

function DynamicForm() {
  const [showExtra, setShowExtra] = useState(false);

  return (
    <Form>
      <Form.Item name="hasExtra" valuePropName="checked">
        <Checkbox onCha nge={e => setShowExtra(e.target.checked)}>
          Добавить дополнительные данные
        </Checkbox>
      </Form.Item>

      {showExtra && (
        <Form.Item name="extraField" label="Дополнительно">
          <Input />
        </Form.Item>
      )}
    </Form>
  );
}

Особенности подхода:

  • Использование состояния showExtra полностью управляет отображением поля.
  • Поле добавляется в DOM только при true, что улучшает производительность и предотвращает ненужные валидации.

Свойство hidden для скрытия поля

Ant Design версии 4.20+ добавил возможность использовать свойство hidden на Form.Item. Оно сохраняет поле в структуре формы, но не отображает его на UI. Это полезно, если требуется сохранить значение для дальнейшей обработки:

<Form.Item name="secretField" label="Секретное поле" hidden={!showSecret}>
  <Input />
</Form.Item>

Преимущества hidden:

  • Поле участвует в методах формы (getFieldsValue, validateFields), даже если скрыто.
  • Удобно для сложных динамических форм, где требуется хранить данные без отображения.

Использование Form.List с условной логикой

Для динамических массивов полей (Form.List) можно комбинировать условную видимость:

<Form.List name="items">
  {(fields, { add, remove }) => (
    <>
      {fields.map(field => (
        <Form.Item
          {...field}
          key={field.key}
          hidden={field.name % 2 === 0} // скрываем каждое второе поле
        >
          <Input placeholder="Введите значение" />
        </Form.Item>
      ))}
      <Form.Item>
        <Button type="dashed" onCl ick={() => add()}>Добавить</Button>
      </Form.Item>
    </>
  )}
</Form.List>

Особенности:

  • Каждое поле в списке управляется через hidden.
  • Список полей можно динамически расширять и скрывать элементы без удаления данных.

Советы по оптимизации условной видимости

  1. Минимизировать ререндеры Использовать shouldUpdate или мемоизацию (React.memo) для тяжелых форм.

  2. Хранить значения скрытых полей Если поле должно быть скрыто, но данные сохраняются, лучше использовать hidden, а не полностью удалять поле из JSX.

  3. Смешанные подходы В сложных формах можно комбинировать dependencies, состояние и hidden, чтобы управлять различными сценариями видимости.

  4. Валидация скрытых полей Поля с hidden по умолчанию участвуют в валидации, если это не требуется, можно использовать rules: [] или Form.Item с shouldUpdate для условного применения правил.

Условная видимость полей в Ant Design обеспечивает гибкость для построения интерактивных форм с динамическими зависимостями. Выбор подхода зависит от того, требуется ли сохранять скрытые значения, оптимизировать ререндер или управлять сложной логикой форм.

Оглавление