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

尝试将var qnaKBId = ConfigurationManager.AppSettings["QnAKnowledgebaseId"];道具传递给您的autoFocus StyledComponent。

Answer 2

此link 包含一个示例，其中包含React 16 React.createRef()和回调方法。

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

Answer 3

如果不使用tabIndex ("tabindex" in normal HTML)，则无法聚焦非交互式元素。 “ div”元素被认为是非交互式的（不同于锚链接“ a”和按钮控件“ button”。）

如果您希望能够集中该元素，则需要添加一个tabIndex属性。如果需要自动添加.attrs，则可以使用它，这样就不必每次都编写道具。

如何聚焦样式化组件？

3 个答案: