Input

Компонент Input в библиотеке Ant Design является универсальным элементом для ввода текста пользователем. Он поддерживает различные типы данных, валидацию, состояния и оформление. Основной импорт выглядит так:

import { Input } from 'antd';

Базовый пример использования:

<Input placeholder="Введите текст" />

Здесь placeholder отображает текст-подсказку внутри поля ввода. Компонент автоматически поддерживает фокус и стандартное поведение HTML <input>.

Типы Input

Ant Design предоставляет несколько специализированных версий компонента Input:

Input.TextArea – для многострочного ввода текста.

<Input.TextArea rows={4} placeholder="Введите несколько строк текста" />

Input.Password – для ввода паролей с маскировкой.
```
<Input.Password placeholder="Введите пароль" />
```

Input.Search – поле с встроенной кнопкой поиска.

<Input.Search
  placeholder="Поиск..."
  enterButton
  onSea rch={value => console.log(value)}
/>

Input.Group – объединение нескольких полей в одну логическую группу.

<Input.Group compact>
  <Input style={{ width: '20%' }} defaultValue="057" />
  <Input style={{ width: '30%' }} defaultValue="1234567" />
</Input.Group>

Основные свойства

Ключевые свойства компонента Input, влияющие на поведение и внешний вид:

value / defaultValue – управление значением поля (контролируемый и неконтролируемый режим).
placeholder – текст-подсказка.
disabled – блокировка поля ввода.
readOnly – делает поле только для чтения.
size – размер поля: small, middle, large.
prefix / suffix – добавление иконки или текста перед или после ввода.
```
<Input prefix="https://" suffix=".com" />
```
allowClear – добавляет кнопку для очистки значения.
```
<Input placeholder="Очистить" allowClear />
```

Обработка событий

Input поддерживает стандартные события, которые позволяют реализовать интерактивное поведение:

onChange – срабатывает при изменении текста.
```
<Input onCha nge={e => console.log(e.target.value)} />
```
onPressEnter – срабатывает при нажатии клавиши Enter.
```
<Input onPressEn ter={e => console.log('Enter:', e.target.value)} />
```

onFocus / onBlur – обработка фокуса и потери фокуса.

<Input onFo cus={() => console.log('Focus')} onB lur={() => console.log('Blur')} />

Валидация и управление формами

Компонент Input часто используется совместно с Form из Ant Design. Это позволяет управлять состоянием и выполнять валидацию:

import { Form, Input, Button } from 'antd';

<Form
  name="login"
  initialValues={{ username: '' }}
  onFin ish={values => console.log('Submitted:', values)}
>
  <Form.Item
    name="username"
    rules={[{ required: true, message: 'Введите имя пользователя!' }]}
  >
    <Input placeholder="Имя пользователя" />
  </Form.Item>

  <Form.Item
    name="password"
    rules={[{ required: true, message: 'Введите пароль!' }]}
  >
    <Input.Password placeholder="Пароль" />
  </Form.Item>

  <Form.Item>
    <Button type="primary" htmlType="submit">
      Войти
    </Button>
  </Form.Item>
</Form>

Здесь rules задают правила валидации, автоматически отображая ошибки и управляя состоянием формы.

Контролируемые и неконтролируемые поля

Контролируемое поле управляется через свойство value и событие onChange:

const [text, setText] = useState('');

<Input value={text} onCha nge={e => setText(e.target.value)} />

Неконтролируемое поле хранит состояние внутри самого компонента с использованием defaultValue:

<Input defaultValue="Начальное значение" />

Использование контролируемых полей необходимо, когда требуется синхронизация с состоянием React, а неконтролируемых — для простых форм без сложной логики.

Стилизация и иконки

Input поддерживает кастомизацию с помощью prefix и suffix, а также стандартных классов и встроенной темы Ant Design:

<Input
  placeholder="Поиск с иконкой"
  prefix={<SearchOutlined />}
  suffix={<CloseCircleOutlined />}
/>

Размер и цвет компонента можно изменять через свойство size и глобальную тему:

<Input size="large" placeholder="Большое поле" />
<Input size="small" placeholder="Малое поле" />

Расширенные возможности

Автофокус: autoFocus устанавливает фокус на поле при рендере.
Поддержка текстового счетчика: с помощью maxLength можно ограничить количество символов и отображать индикатор.
Комбинированные Input.Group: позволяет объединять поля, кнопки и селекты в одной строке, создавая сложные формы ввода.

<Input.Group compact>
  <Input style={{ width: '70%' }} defaultValue="example" />
  <Input.Search style={{ width: '30%' }} enterButton="Go" />
</Input.Group>