1

我试图在渲染后将焦点设置在人员选择器输入上，但是，我不能使用任何 dom 查询选择器等，因为它在正确的时间并不真正存在。

没有有效的 tabindex 值，输入是渲染中的多个子项

{this.state.mentionStatus ? (
  <div className={styles.mentionSearchBox}>
    <PeoplePicker
      selectionChanged={this.addPerson}

      placeholder="Select person."
      showMax={10}
      id="FocusOnMe"
      type={PersonType.any}
    ></PeoplePicker>
  </div>
) : (
  <div></div>
)}

渲染后的代码如下：

<mgt-people-picker id="FocusOnMe" tabindex="2" autofocus="">
    <div dir="ltr" class="people-picker">
        <div class="selected-list">
            <mgt-flyout light-dismiss="" class="flyout">
                <div class="search-box">
                    <input id="people-picker-input" class="search-box__input" type="text" label="people-picker-input" aria-label="people-picker-input" role="input" placeholder="Select person.">
                </div>
                <div slot="flyout" class="flyout-root">
                </div>
            </mgt-flyout>
        </div>
    </div>
</mgt-people-picker>

有谁知道有什么方法可以让用户无需点击就可以开始输入？

4

1 回答 1

0

我想到了。

元素在渲染时创建的#shadowroot 元素需要被获取，然后你可以在其子元素上使用'getlementsbyid' 来定位你需要的输入——'people-picker-input'。

它需要延迟才能工作。

private delay(ms: number) {
    return new Promise((resolve) => setTimeout(resolve, ms));
}

private async setFocustoPicker() {
    await this.delay(100);
    let elem = document.getElementById("FocusOnMe");
    const shadow = elem.shadowRoot;
    let childInput: HTMLElement = shadow.getElementById("people-picker- 
    input");
    childInput.focus();
}

创建 peoplepicker 时，我给了它一个 ID，你永远不知道页面上是否可能存在另一个

<PeoplePicker
    id="FocusOnMe"
    selectionChanged={this.addPerson}
    placeholder="Select person."
    showMax={10}
    type={PersonType.any}
></PeoplePicker>`
于 2021-09-08T18:07:01.540 回答