Question

我有以下React弹出组件：

export class PopUp extends React.Component {
  public divContainer: HTMLElement;

  public componentDidMount() {
    this.divContainer.focus();
  }

  private buildRef = (e: HTMLDivElement) => {
    this.divContainer = e;
  }

  render() {
    return (
      <div ref={this.buildRef} tabIndex={0}>
        <header>My PopUp</header>
        <div>
          {this.props.children}
        </div>
      </div>
    );
  }
}

这是可以使用的方式之一：

<PopUp>
  <div>
    <textarea rows="4" cols="50">
      Stuff goes here
    </textarea>
  </div>
  <button>Add</button>
</PopUp>

现在，当我选中时，焦点会按预期放在弹出窗口的父div上。如果我继续使用Tab键，它会关注children，但是一旦到达最后一个child元素，焦点将移动到打开弹出窗口的父页面。

我只希望标签/聚焦仅限于弹出元素。一旦专注于最后一个孩子，我怎么能让它回过头来专注于弹出窗口的父div？

Answer 1

我希望您已经解决了您的问题。但是，我用对话框或带有子组件的弹出窗口“循环”制表的方式是，我不得不添加blur = {（）=> {this.theFirstChildReference.focus（）;}}

今天，我通常将其放在类自己的函数中。所以

setFirstChildFocus = () => {
  this.firstChildReference.focus();
};

因此

blur={this.setFirstChildFocus}

最后一个子组件中的

属性。

React popup的焦点和tabIndex

1 个答案: