Ставим обработчик фокуса для кастомоного React-компонента
Дата: 28.05.2019 в 12:48, Категория:
ReactJS
-
2905
-
64

Что делать, если разработчик компонента для форматирования номера телефона или других данных в текстовом поле, не добавил обработчики на установку и снятие фокуса?
То есть, какой-то кастомный не позволяет прописать onFocus
, чтобы сделать какое-то действие, когда был установлен фокус на поле, типа:
<InputMask onFocus={() => console.log('focused')} />
Тут есть немного костыльное, но рабочее решение — использовать ref.
...
// Установка флага focused
setFocus = bool => {
this.setState({
focused: bool,
});
};
// Метод вызывается при фокусе
onFocus = () => {
this.setFocus(true);
};
// Метод вызывается после снятия фокуса
onBlur = () => {
this.setFocus(false);
};
// Устанавливаем обработчики после рендера
componentDidMount() {
this.input.addEventListener('focus', this.onFocus);
this.input.addEventListener('blur', this.onBlur);
}
// Удаляем обработчики после демонтирования компонента
componentWillUnmount() {
this.input.removeEventListener('focus', this.onFocus);
this.input.removeEventListener('blur', this.onBlur);
}
render() {
return (
<InputMask
mask="+7 999 999 99 99"
inputRef={ref => (this.input = ref)}
/>
);
}
ПОДПИШИСЬ НА ОБНОВЛЕНИЯ
Только новые публикации и никакого мусора.