React.js使用React Bootstrap点击标签内元素切换激活标签问题

核心逻辑是将Tab组件从非受控模式切换为受控模式，通过state控制激活标签的key，修改步骤如下：

• 1. 新增state存储当前激活的标签key

import { useState } from 'react';

// 组件内部声明状态
const [activeKey, setActiveKey] = useState('first');

• 2. 修改Tab.Container属性，绑定状态和选择事件
     将原有的Tab.Container配置替换为：

<Tab.Container 
  activeKey={activeKey} 
  onSelect={(key) => setActiveKey(key)}
  defaultActiveKey="first"
>

• 3. 改写handleSelect函数，更新状态触发标签切换，同时阻止a标签默认跳转行为

const handleSelect = (e) => {
  e.preventDefault();
  setActiveKey("second");
}

修改完成后点击第一个标签页内的Se créer un compte按钮，即可直接切换到第二个标签。

内容的提问来源于stack exchange，提问作者Silent observer