单击react js更改活动选项卡

Question

我正在使用 React.Bootstrap，我正在尝试使用选项卡内部更改活动选项卡。例如，我在选项卡 1 中，我想在不使用选项卡外的导航链接的情况下转到选项卡 2。

这是代码

    <Tab.Container defaultActiveKey="first">
                <Col md={3} style={{border: "1px solid #084A83", background: "white", height: "150px"}}>
                  <Nav variant="pills" className="flex-column" align="left">
                    <Nav.Item>
                      <Nav.Link eventKey="first">Se connecter</Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                      <Nav.Link eventKey="second">Se créer un compte</Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                      <Nav.Link eventKey="third">Plus d'informations</Nav.Link>
                    </Nav.Item>
                  </Nav>
                </Col>
                <Col className="account-col" md={{ span: 7, offset: 1 }} style={{border: "1px solid #084A83", background: "white"}}>
                  <Tab.Content>
                    <Tab.Pane eventKey="first">
                        <Form.Group className="mb-3" controlId="formBasicName">
                            <a onClick={handleSelect} className="btn btn-primary" style={{background: "transparent", border: "1px solid #084A83", borderRadius: "0px", marginTop: "10px", marginBottom: "10px", textAlign: "center", color: "black"}}>Se créer un compte</a>
                        </Form.Group>
                      </Form>
                    </Tab.Pane>
                    <Tab.Pane eventKey="second">
                        <p>Second</p>
                    </Tab.Pane>
         </Tab.Content>
</Tab.Container>

我的 handleSelect() 函数如下所示：

const handleSelect = (eventKey) => {
        eventKey = "second"
    }

感谢您的帮助。

Answer 1

您需要使用某种状态来表示当前 selected 选项卡。然后您可以从导航或您的外部组件设置此状态。

将此添加到您的组件函数中：

  const [currentTab, setCurrentTab] = useState("first");

  const handleSelect = (eventKey) => {
    setCurrentTab("second");
  };

显然这只会 select 第二个选项卡，但这似乎是您在示例中想要的。

然后将您的 Tab.Container 更改为：

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

因此这也允许从 Nav 的主题中更改 selection。

这是一个带有工作示例的 sandbox link。

单击react js更改活动选项卡

Change active tab on click react js

javascript

reactjs

react-bootstrap