Реагировать пользовательский интерфейс материала на FocusOut - PullRequest
Новая
       9

Реагировать пользовательский интерфейс материала на FocusOut

0 голосов
/ 01 февраля 2019

Я сейчас использую 

<TextField onChange={e => this.change(e, items)}

Это срабатывает при каждой букве, которую я помещаю в TextField, следовательно, текст, который я набираю, заполняется в замедленном режиме.Я думал, что было бы лучше, если бы этот запрос вышел, как только пользователь наберет все и сфокусируется.Какое событие я могу использовать в этом сценарии с React & Material UI TextField?

1 Ответ

0 голосов
/ 01 февраля 2019

Наличие отклоненной версии вашей функции полезно, когда любое событие DOM прикреплено.Это уменьшает количество вызовов этой функции до минимума и, таким образом, повышает производительность.

Итак, вы можете сделать это: 

import _ from 'lodash';

constructor(props) {
    super(props)

    this.onChangeDebounce = _.debounce(e => this.change(e, items), 300);
}

render() {
    ...
    onChange={e => this.onChangeDebounce(e)}
    ...
}

В этом случае я перехожу к debounce только два параметра:

  1. Функция, которая должна быть ограничена по скорости
  2. Ограничение скорости в миллисекундах, т. Е. Время ожидания до запуска функции.

Или вы можете использовать событие onBlur, которое доступно для любого элемента DOM.Событие onBlur происходит всякий раз, когда вход теряет фокус.Другими словами: когда вы удаляете курсор изнутри ввода, он теряет «фокус» или становится «размытым».

Предостережение заключается в том, что у него нет ассоциированного события, поэтому для достиженияесли хотите, вы можете обновить состояние с помощью значения поля и в onBlur получить это значение из состояния.

Здесь у вас есть скрипка , делающая это.

...