Input

React Input Посмотреть как работает

Подключение

• Импортируем

import Input from "yb-input";

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

• Пример jsx

<Input
    onChange={this.change}
    keyUp={this.keyUp}
/>

Пропсы

• String value Установка начального значения
• String className Имя класса для добавления стилей
• String placeholder Подсказка при отсутствии наполнения
• Boolean isInvalid Маркер ошибки
• Boolean isDisabled Блокировка редактирования компонента
• String size, default="" При установке size="auto", ширина Input-a будет автоматически изменяться в зависимости от содержимого
• Component contextMenuComponent Компонент, который отобразится рядом с Input-ом как альтернатива контекстному меню

{
  '9': '[0-9]',
  'a': '[A-Za-z]',
  '*': '[A-Za-z0-9]'
}

События

• onChange(String value) Вызывается при изменении значения
• onKeyUp(Event event, String value) Вызывается при изменении значения event.keyCode=13 - клавиша Enter
• onKeyDown(Event event, String value) Вызывается при изменении значения
• onContextMenu(Event event) Вызывается при появлении контекстного меню после нажатия правой кнопки мыши Запрет появления меню: event.preventDefault()
• onClick(Event event) Вызывается при клике на элементе
• onBlur(Event event) Срабатывает при снятии фокуса с элемента

Внешние вызовы

• Object callbacks Контейнер для методов внешних вызовов
• $hideContextMenu() Скрыть пользовательское контекстное меню, если оно появилось (используется для сокрытия меню не по клику вне компонента, а по клику на конкретный управляющий элемент)
• $focus() Взять Input в фокус (проверено на простом Input, без маски)

Исправления

• 1.0.13: isInvalid теперь работает корректно, меняет цвет рамки у тега <input>
• 1.1.0: Теперь у Input-a может быть автоматически изменяемая ширина (по содержимому)
• 1.1.1: Ловим правую кнопку мыши
• 1.1.2: Пользовательское контекстное меню
• 1.1.4: Взять в фокус
• 1.1.7: isDisabled
• 1.1.9: очистка Input-a через setState
• 1.1.10: добавлен onBlur