如何聚焦样式化的组件?

Posted

技术标签:

【中文标题】如何聚焦样式化的组件?【英文标题】:How to focus a styled component? 【发布时间】:2018-02-22 09:44:55 【问题描述】:

我有一个样式组件:

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

我想在安装使用它的组件时focus它:

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

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

这种技术不起作用 - 有解决办法吗?

【问题讨论】:

您是否尝试过在 StyledComponent 中使用 tabindex=0 属性? @vinhas 这对我不起作用,将组件上的 tabIndex="0" 设置为 jsx 属性确实有效 【参考方案1】:

尝试将autoFocus 属性传递给您的StyledComponent,例如&lt;StyledComponent autoFocus /&gt;

【讨论】:

【参考方案2】:

这个link 有一个包含 React 16 React.createRef() 和回调方法的示例。

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

【讨论】:

styled-components 对我来说失去了自动对焦 ?【参考方案3】:

如果不使用tabIndex ("tabindex" in normal html),您将无法聚焦非交互式元素。 “div”元素被认为是非交互式的(与锚链接“a”和按钮控件“button”不同。)

如果你希望能够聚焦这个元素,你需要添加一个 tabIndex 属性。如果需要自动添加它,您可以使用.attrs,这样您就不需要每次都编写道具。

【讨论】:

.attrs 也拒绝添加它:-(

以上是关于如何聚焦样式化的组件?的主要内容,如果未能解决你的问题,请参考以下文章

如何有条件地测试样式化的组件和子元素?

如何在反应、样式化的组件中使用字体真棒图标更改单选按钮的颜色

样式化的组件和范围

样式化的组件添加组件名称作为类名

React 和 Typescript,样式化的组件和子组件

样式化的组件继承不起作用