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

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

То есть, какой-то кастомный не позволяет прописать 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)}
        />
    );
}