如何聚焦样式组件？

Question

我有一个样式化的组件：

const StyledComponent = styled.div`
    ...
`;

当安装使用它的组件时，我想关注它：

class someComponent extends React.Component {
    componentDidMount() {
        this.sc.focus();
    }

    render() {
        return (
            <StyledComponent innerRef={(elem) => { this.sc = elem; }}>
                ...
            </StyledComponent>
        );
    }
}

这项技术不起作用-有解决方案吗？




Answer 1

尝试将自动聚焦道具传递到您的StyledComponent，如

Answer 2

此链接有一个React 16React的示例。createRef（）和回调方法。

您是否尝试过设置autoFocus属性，或者这不适合您的用例？

Answer 3

如果不使用tabIndex（常规超文本标记语言中的tabindex），则无法聚焦非交互式元素。div元素被认为是非交互式的（不同于锚点链接a和按钮控件按钮）。

如果希望能够聚焦此元素，则需要添加一个tabIndex道具。您可以使用。attrs如果需要，可以自动添加，这样您就不必每次都编写道具。