Estoy usando React.Bootstrap y estoy tratando de cambiar la pestaña activa usando una pestaña interna. Por ejemplo, estoy en la pestaña 1 y me gustaría ir a la pestaña 2 SIN usar los enlaces de navegación que tengo fuera de mis pestañas.
aquí está el código
<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>Mi función handleSelect() se ve así:
const handleSelect = (eventKey) => { eventKey = "second" }Gracias por tu ayuda.
Debe usar algún estado para representar la pestaña seleccionada actualmente. Luego puede configurar este estado desde cualquiera de los navegadores o su componente externo.
Agregue esto dentro de su función de componente:
const [currentTab, setCurrentTab] = useState("first"); const handleSelect = (eventKey) => { setCurrentTab("second"); };Obviamente, esto solo seleccionará la segunda pestaña, pero eso parece ser lo que quería en su ejemplo.
Luego cambie su Tab.Container a:
<Tab.Container defaultActiveKey="first" activeKey={currentTab} onSelect={(key) => setCurrentTab(key)} > Así que esto también permitirá cambiar la selección desde los propios Nav .
Aquí hay un enlace de sandbox con un ejemplo de trabajo.