0

estoy haciendo una tabla en react con bootstrap 3 y tengo un problema al aplicar la clase active. Deberia funcionar asi: cuando la condicion sea verdadera (cuando hoy sea lunes martes o miercoles), ni bien se carge la pagina se aplique la clase active en el th verdadero y luego que se aplique en otros th a medida que vaya haciendoles click. Hasta ahora logro que aparezca la clase active en el elemento true pero no se va cuando hago click en otro.. alguna sugerencia? muchas gracias!

este es el codigo:

<table className="nav nav-tabs table table-grid table-bordered">
    <thead>
        <tr>
            { new Date().getDay() == '1' ? <th className='active'><a href="#tab1default" data-toggle="tab">Lunes</a></th> : <th><a href="#tab1default" data-toggle="tab">Lunes</a></th>  }   
            { new Date().getDay() == '2' ? <th className='active'><a href="#tab2default"  data-toggle="tab">Martes</a></th> : <th><a href="#tab2default" data-toggle="tab">Martes</a></th>  }   
            { new Date().getDay() == '3' ? <th className='active'><a href="#tab3default" data-toggle="tab">Miércoles</a></th> : <th><a href="#tab3default" data-toggle="tab">Miércoles</a></th>  } 
        </tr>
    </thead>
</table>
3
  • el problema es que si el dia de la fecha actual es el que ya viene marcado no importa cuantos clicks hagas siempre saldra active el inicial Commented el 23 abr. 2019 a las 18:43
  • Darien, gracias por tu respuesta.. si entiendo lo que decis, pero no hay manera de poder sacarlo cuando clickee en otro? Commented el 23 abr. 2019 a las 18:46
  • 1
    Hice un fiddle para que veas como se puede hacer jsfiddle.net/e4qcu9rh/4 mira ver si te convence. Inicialmente saldria seleccionado el que corresponda con el dia en el que estamos, y a medida que navegues se van seleccionando Commented el 23 abr. 2019 a las 19:34

1 respuesta 1

0

Yo partiría declarando un estado donde marco el botón que quiero ver al inicar la página

const [buttonState, setButtonState] = React.useState(1)

Y luego actualizaría ese estado cada vez que escucha al evento onClick, puedes crear una función que quedaría así:

function handleClick(position){
 setButtonState(position)
}
. . .
<tr>
  <th><a className={buttonState === 1 ? 'active' : ''} href="#tab1default" data-toggle="tab" onClick={handleClick(1)}>Lunes</a></th>
  <th><a className={buttonState === 2 ? 'active' : ''} href="#tab2default" data-toggle="tab" onClick={handleClick(2)} >Martes</a></th>
  <th><a className={buttonState === 3 ? 'active' : ''} href="#tab3default" data-toggle="tab" onClick={handleClick(3)} >Miércoles</a></th>
</tr>

O creando una función anónima

() => setButtonState(position)

Esto último te quedaría así:

const [buttonState, setButtonState] = React.useState(1)
render(){
 return(
   <table className="nav nav-tabs table table-grid table-bordered">
    <thead>
        <tr>
          <th><a className={buttonState === 1 ? 'active' : ''} href="#tab1default" data-toggle="tab" onClick={() => setButtonState(1)}>Lunes</a></th>
          <th><a className={buttonState === 2 ? 'active' : ''} href="#tab2default" data-toggle="tab" onClick={() => setButtonState(2)} >Martes</a></th>
          <th><a className={buttonState === 3 ? 'active' : ''} href="#tab3default" data-toggle="tab" onClick={() => setButtonState(3)} >Miércoles</a></th>
        </tr>
    </thead>
   </table>
 )
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.