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} />
        );
    }
}

控件正在扩展React的IconButton。

如您所见，我将焦点放在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的定义。

但是您知道我要实现的目标。有可能吗？

如何通过React API正确设置对React IconButton的关注

正确设置焦点

0 个答案: