0
271
VisualizaçõesEl nombre de clase condicional no cambia incluso después de cambios de valor
Estoy construyendo una página con dos pestañas. Cuando se hace clic en una pestaña, la otra pestaña debe tener className="nav-link active" y la otra pestaña debe cambiar a className="nav-link" y viceversa.
Aquí está mi código:
import react from 'react' const account = () => { const [activeTab, tabActive] = react.useState("true") return ( <> <div className='container my-5'> <ul className="nav nav-tabs"> <li className="nav-item"> <button type="button" className={"nav-link " + (activeTab?'active':'')} onClick={() => tabActive("true")}>Profile details</button> </li> <li className="nav-item"> <button type="button" className={"nav-link " + (activeTab?'':'active')} onClick={() => tabActive("false")}>Select Colleges</button> </li> </ul> </div> <div className='container my-5'> { activeTab === "true" && <p>Value is true</p> } { activeTab === "false" && <p>Value is false</p> } </div> </> ) } export default account El código mencionado anteriormente debería poder hacer lo que espero, sin embargo, no puedo eliminar la clase active y agregarla a los botones como se esperaba. O se aplica a ambos botones al mismo tiempo o dos ninguno en absoluto.
1 Respostas
Responde à pergunta0
Las cadenas no vacías siempre son verdaderas. Utilice booleanos en su lugar.
const account = () => { const [activeTab, tabActive] = react.useState(true); return ( <> <div className='container my-5'> <ul className="nav nav-tabs"> <li className="nav-item"> <button type="button" className={"nav-link " + (activeTab ? 'active' : '')} onClick={() => tabActive(true)} > Profile details </button> </li> <li className="nav-item"> <button type="button" className={"nav-link " + (activeTab ? '' : 'active')} onClick={() => tabActive(false)} > Select Colleges </button> </li> </ul> </div> <div className='container my-5'> {activeTab ? <p>Value is true</p> : <p>Value is false</p>} </div> </> ) };Actualizar
Para más de 2 pestañas, use un índice o GUID, cualquier cosa que identifique de forma única una pestaña, para almacenar en el estado de la pestaña activa, y verifique que este valor coincida al renderizar.
Ejemplo:
const account = () => { const [activeTab, tabActive] = react.useState(0); return ( <> <div className='container my-5'> <ul className="nav nav-tabs"> <li className="nav-item"> <button type="button" className={"nav-link " + (activeTab === 0 && 'active')} onClick={() => tabActive(0)} > Profile details </button> </li> <li className="nav-item"> <button type="button" className={"nav-link " + (activeTab === 1 && 'active')} onClick={() => tabActive(1)} > Select Colleges </button> </li> <li className="nav-item"> <button type="button" className={"nav-link " + (activeTab === 2 && 'active')} onClick={() => tabActive(2)} > Select Something Else </button> </li> </ul> </div> <div className='container my-5'> {activeTab === 0 && <p>Active tab is 0</p>} {activeTab === 1 && <p>Active tab is 1</p>} {activeTab === 2 && <p>Active tab is 2</p>} </div> </> ) }; 