Что делать, если разработчик компонента для форматирования номера телефона или других данных в текстовом поле, не добавил обработчики на установку и снятие фокуса?
То есть, какой-то кастомный не позволяет прописать onFocus, чтобы сделать какое-то действие, когда был установлен фокус на поле, типа:
_10<InputMask onFocus={() => console.log('focused')} />
Тут есть немного костыльное, но рабочее решение — использовать ref.
_39..._39_39// Установка флага focused_39setFocus = bool => {_39 this.setState({_39 focused: bool,_39 });_39};_39_39// Метод вызывается при фокусе_39onFocus = () => {_39 this.setFocus(true);_39};_39_39// Метод вызывается после снятия фокуса_39onBlur = () => {_39 this.setFocus(false);_39};_39_39// Устанавливаем обработчики после рендера_39componentDidMount() {_39 this.input.addEventListener('focus', this.onFocus);_39 this.input.addEventListener('blur', this.onBlur);_39}_39_39// Удаляем обработчики после демонтирования компонента_39componentWillUnmount() {_39 this.input.removeEventListener('focus', this.onFocus);_39 this.input.removeEventListener('blur', this.onBlur);_39}_39_39render() {_39 return (_39 <InputMask_39 mask="+7 999 999 99 99"_39 inputRef={ref => (this.input = ref)}_39 />_39 );_39}