Слияние кода завершено, страница обновится автоматически
/**
* inline: true
*/
import Mentions from 'rc-mentions';
// Импортируем стандартные стили
import './index.less';
const { Option } = Mentions;
var Demo = (
<Mentions>
<Option value="light">Light</Option>
<Option value="bamboo">Bamboo</Option>
<Option value="cat">Cat</Option>
</Mentions>
);
React.render(<Demo />, container);
Примечание: Мы используем index.less для стилизации, вы можете преобразовать их в CSS и правильно сослаться на код выше.
| имя | описание | тип | значение по умолчанию |
|---|---|---|---|
| autoFocus | Автоматически получать фокус при монтировании компонента | boolean |
false |
| defaultValue | Значение по умолчанию | string |
- |
| filterOption | Настройка логики фильтрации опций | false | (input: string, option: OptionProps) => boolean |
- |
| notFoundContent | Установить содержимое упоминаний, когда не найдено соответствие | ReactNode |
'Not Found' |
| placement | Установить размещение всплывающего окна | 'top' | 'bottom' |
'bottom' |
| direction | Установить направление всплывающего окна | 'ltr' | 'rtl' |
|
| prefix | Установить ключевое слово триггера префикса | string | string[] |
'@' |
| rows | Установить количество строк | number |
1 |
| split | Установить разделение строки до и после выбранного упоминания | string |
' ' |
| silent | Используется в переходной фазе, не реагирует на события ввода с клавиатуры при значении true
|
boolean |
false |
| validateSearch | Настроить логику поиска триггеров | (text: string, props: MentionsProps) => void |
- |
| value | Установить значение упоминаний | string |
- |
| onChange | Триггер при изменении значения | (text: string) => void |
- |
| onKeyDown | Триггер при нажатии пользователем клавиши | React.KeyboardEventHandler<HTMLTextAreaElement> |
- |
| onKeyUp | Триггер, когда пользователь отпускает клавишу | React.KeyboardEventHandler<HTMLTextAreaElement> |
- |
| onSelect | Триггер, когда пользователь выбирает опцию | (option: OptionProps, prefix: string) => void |
- |
| onSearch | Триггер при попадании префикса | (text: string, prefix: string) => void |
- |
| onFocus | Триггер, когда упоминания получают фокус | React.FocusEventHandler<HTMLTextAreaElement> |
- |
| onBlur | Триггер, когда упоминания теряют фокус | React.FocusEventHandler<HTMLTextAreaElement> |
- |
| getPopupContainer | DOM-контейнер для предложений | () => HTMLElement |
- |
| autoSize | Функция автоматического изменения размера текстовой области, может быть установлена на true|false или объект { minRows: 2, maxRows: 6 }
|
boolean | object |
- |
| onPressEnter | Функция обратного вызова, которая срабатывает при нажатии клавиши Enter | function(e) |
- |
| onResize | Функция обратного вызова, которая срабатывает при изменении размера текстовой области | function({ width, height }) |
- |
| name | description |
|---|---|
| focus() | Компонент получает фокус |
| blur() | Компонент теряет фокус |
npm install
npm start
онлайн-пример: http://react-component.github.io/mentions/
npm test
npm run coverage
rc-mentions выпущен под лицензией MIT.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )