Как правильно установить фокус на React IconButton через React API

Question

У меня есть следующий элемент управления реакцией, который я создал:

export class MyButtonControl extends React.Component<MyButtonControlProps, {}> {
    private iconButtonRef: IconButton;

    public componentDidMount() {
        this.setFocus();
    }

    private setFocus() {
        const element = ReactDOM.findDOMNode(this.iconButtonRef) as HTMLElement;
        element.focus();
    }

    public render() {
        const buttonProps: IButtonProps = {
            className: "my-button",
            title: "my button"
        };
        return (
            <IconButton {...buttonProps} ref={c => this.iconButtonRef = c} />
        );
    }
}

Элемент управления расширяет IconButton.

React. Как вы можете видеть, я установил фокус внутри setFocus, однакоЯ делаю это так, как мне не нравится: вручную!Это нежелательно, потому что оно плохо масштабируется.

Правильная настройка фокуса

Возможно ли это сделать через React API?Я провел поиск внутри IconButton, но там нет focus() или setFocus().

Я видел, что IconButton в основном отображает BaseButton (также часть библиотеки React), поэтомуЯ думал, что смогу сделать это:

export class MyButtonControl ... {
    private iconButtonRef: BaseButton;

    ...

    private setFocus() {
        this.iconButtonRef.focus();
    }

    public render() {
        ...
        return (
            <IconButton ... ref={c => this.iconButtonRef = c as any as BaseButton} />
        );
    }
}

Поскольку BaseButton имеет метод focus.Но код терпит неудачу, потому что, отлаживая, я вижу, что объект в iconButtonRef не содержит определения focus, имеющего тип ComponentWithInjectedProps.

Но вы понимаете, что япытаясь достичь.Возможно ли это как-то?