时间戳

首页 > 解决方案 > (React) 组件更新时如何将焦点放在第一个元素上？

reactjs - (React) 组件更新时如何将焦点放在第一个元素上？

问题描述

我在反应中有以下代码。在ParentComponent中，我根据是否满足某些条件来渲染第一个或第二个面板。假设FirstPanel是渲染的。在里面FirstPanel，我可以进行一些交互来更新面板，我需要将焦点转到第一个面板中的第一个元素（也就是第一个 div 元素）我该怎么做？我尝试使用this.props.setRef.focus()但它不起作用。

父组件

setCurrentPanel(panel) {
    this.currentPanel = panel;
}

render() {
    if (this.state.showFirstPanel)
        return <FirstPanel setRef={this.setCurrentPanel} />;
    if (this.state.showSecondPanel)
        return <SecondPanel setRef={this.setCurrentPanel} />;
    return undefined;
}

第一面板

componentDidUpdate() {
    // put focus on component FirstPanel again
}
render() {
    return <div role="tabpanel" tabIndex="0" ref={this.props.setRef}>
       {children}
    </div>
}

标签： reactjs

解决方案

根据您的ParentComponent实现，当状态更改时，FirstPanel将卸载，然后SecondPanel安装。

当您再次切换时，SecondPanel卸载和FirstPanel安装。

要实现您所追求的，只需在生命周期componentDidUpdate和componentDidMount生命周期中进行焦点操作。

此外，如果您ParentComponent不打算使用currentPanel，您可以creatRef在每个 Panel 组件中。您setRef目前只是一个函数，而不是包含对 dom 元素的引用的 Ref 对象。

推荐阅读