如何聚焦样式组件

Question

我有一个样式的组件：

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

我想在安装使用它的组件时将其 focus：

class someComponent extends React.Component {
    componentDidMount() {
        this.sc.focus();
    }
    render() {
        return (
            <StyledComponent innerRef={(elem) => { this.sc = elem; }}>
                ...
            </StyledComponent>
        );
    }
}

此技术不起作用 - 是否有解决方案？

Answer 1

如果不使用 tabIndex（在普通HTML中" tabindex"），您无法将非相互作用元素焦点。"div"元素被认为是非相互作用的（与锚链接" a"one_answers"按钮"控件"按钮"。）

如果您想能够集中此元素，则需要添加Tabindex Prop。您可以使用.attrs自动添加它，因此您无需每次编写道具。

Answer 2

此链接 有一个示例，其中均具有16 React.createRef()和回调方法。

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

Answer 3

尝试将autoFocus Prop传递给您的StyledComponent，例如<StyledComponent autoFocus />。