在react中需要将注意力集中在 div 上

IT技术 javascript reactjs
2021-05-24 19:23:41

我有一个早先被包裹在 H1 标签中的文本。加载页面后，我需要专注于该文本。为了方便起见，我将它包裹在一个 div 中。

render() {
    const { translate, billing: { primaryContactSelection = true } } = this.props;
    return (
      <div {...resolve(BillingStyles, 'billingContainer')}>
        <div id="mainHeader"><h1 {...resolve(BillingStyles, 'mainHeader')}>
          {translate('PanelBillingHeadingText')}
        </h1> </div>
        <div {...resolve(BillingStyles, 'billingInfoContainer')}>
         ......
         ......
        </div>
      </div>
    );
  }
}

我试过下面的代码：

componentDidMount() {
    console.log('Component Did Mount .............');
    document.getElementById('#mainHeader').focus();
  }

但它并不专注于 div。

2个回答

div默认情况下，第一个元素不可聚焦，因此您需要给它一个tabIndex：

render() {
    const { translate, billing: { primaryContactSelection = true } } = this.props;
    return (
      <div {...resolve(BillingStyles, 'billingContainer')}>
        <div tabIndex="0" id="mainHeader"><h1 {...resolve(BillingStyles, 'mainHeader')}>
          {translate('PanelBillingHeadingText')}
        </h1> </div>
        <div {...resolve(BillingStyles, 'billingInfoContainer')}>
         ......
         ......
        </div>
      </div>
    );
  }
}

接下来确保在调用 getElementById 时不包含主题标签，因此它应该是： 

componentDidMount() {
    console.log('Component Did Mount .............');
    document.getElementById('mainHeader').focus();
  }

这应该从那里开始工作。

当您使用 getElementById 函数时，您不需要#在大括号内签名。

其它你可能感兴趣的问题
上一篇npm run build 不使用代理 下一篇如何将 Chosen 合并到我的 React 项目中？