Ставим обработчик фокуса для кастомоного React-компонента

Ставим обработчик фокуса для кастомоного React-компонента

  • 3033
  • Дата: 28.05.2019 в 12:48:00

Что делать, если разработчик компонента для форматирования номера телефона или других данных в текстовом поле, не добавил обработчики на установку и снятие фокуса?

То есть, какой-то кастомный не позволяет прописать onFocus, чтобы сделать какое-то действие, когда был установлен фокус на поле, типа:

1<InputMask onFocus={() => console.log('focused')} />
2

Тут есть немного костыльное, но рабочее решение — использовать ref.

1...
2
3// Установка флага focused
4setFocus = bool => {
5    this.setState({
6        focused: bool,
7    });
8};
9
10// Метод вызывается при фокусе
11onFocus = () => {
12    this.setFocus(true);
13};
14
15// Метод вызывается после снятия фокуса
16onBlur = () => {
17    this.setFocus(false);
18};
19
20// Устанавливаем обработчики после рендера
21componentDidMount() {
22    this.input.addEventListener('focus', this.onFocus);
23    this.input.addEventListener('blur', this.onBlur);
24}
25
26// Удаляем обработчики после демонтирования компонента
27componentWillUnmount() {
28    this.input.removeEventListener('focus', this.onFocus);
29    this.input.removeEventListener('blur', this.onBlur);
30}
31
32render() {
33    return (
34        <InputMask
35            mask="+7 999 999 99 99"
36            inputRef={ref => (this.input = ref)}
37        />
38    );
39}
40

Комментарии:

Loading Comments...