问为什么引导模式接收集中在标签上？

EN

这是因为使用tabindex="-1"的元素仍然可以接收编程焦点。

负值(通常是tabindex="-1")意味着该元素无法通过顺序键盘导航访问，但可以使用Javascript进行聚焦，也可以通过鼠标单击查看。使用JavaScript创建可访问的小部件非常有用。Mozilla

在引擎盖下，Bootstrap控制焦点，以便当您打开一个模式时，焦点放在模型上，当关闭时，它将焦点返回到以前的焦点元素。

它还捕捉焦点--在您的示例中，这就是为什么不能使用shift + tab从模式中“向后”移动的原因。

可以通过将autoFocus标志设置为false来调整此行为。

<Modal show={show} onHide={handleClose} autoFocus={false}>
  ...
</Modal>

注意，将autoFocus设置为false通常被认为是不好的做法，因为它使模式更难访问。

我认为这回答了你问题的标题，尽管我认为你想要达到的目标实际上是无关的。如果您想在按tab时将焦点从“按钮2”移到“按钮1”，则必须通过编程完成。也许有点像..。

const btnRef = React.useRef();

const handleTab = () => {
  btnRef.current.focus();
}


return (
  <>
    ...
    <Button ref={btnRef}>
      Close
    </Button>
    <Button onBlur={handleTab}>
      Save Changes
    </Button>
    ...
  </>
)