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

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

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

那应该从那里开始。

需要把重点放在div上

2 个答案: