在反应中需要将注意力集中在 div 上

Question

我有一个早先被包裹在 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。

Answer 1

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();
  }

这应该从那里开始工作。