Boa noite!
Estou no desenvolvimento de uma página que tem três botões.
Sendo que o primeiro botão(Publicações) renderiza este conteúdo:
O segundo Botão(Jorys) renderiza este segundo conteúdo:
E o terceiro botão(Sugestões) renderiza este terceiro conteúdo vazio(por enquanto):
OBS: Sempre que se clica em um botão o react-route muda o path:
- Sendo /explorer para Publicação;
- /jorys para Jorys e;
- /sugestions para Sugestions.
A ideia é fazer com que sempre que um botão é clicado uma classe chamada active
seja adicionada ao link desse botão (e consequentemente retire essa classe dos outros botões caso eles a tenham) para fins de um css personalizado no botão personalizado!
Eu consegui implementar a lógica por trás disso, porém estou tendo problemas para que funcione na prática pois sempre que mudo o state
pelo setState()
, a atualização (ou seja a adição da classe) só vem no próximo mount! Mesmo eu utilizando de componentDidUpdate()
não da resultado...
Vou deixar o código abaixo:
import React, { Component } from 'react'
import {Box, Grid } from "@chakra-ui/react"
import TabExplorer from './TabExplorer'
import TabWorks from './TabWorks'
import {Link, BrowserRouter as Router, Switch, Route} from 'react-router-dom'
export default class Tabs extends Component {
constructor(props){
super(props)
this.isClicked = this.isClicked.bind(this)
this.updateClass = this.updateClass.bind(this)
this.state = {
explorer: true,
jorys: false,
sugestions: false
}
}
componentDidMount() {
this.isClicked()
this.updateClass()
}
componentWillUnmount() {
this.isClicked()
this.updateClass()
}
componentDidUpdate() {
this.updateClass()
}
UNSAFE_componentWillUpdate(){
this.updateClass()
}
isClicked() {
const stateHere = this.state
const path = window.location.pathname
switch(path){
case '/explorer':
stateHere.explorer = true
stateHere.jorys = false
stateHere.sugestions = false
break
case '/jorys':
stateHere.jorys = true
stateHere.explorer = false
stateHere.sugestions = false
break
case '/sugestions':
stateHere.sugestions = true
stateHere.jorys = false
stateHere.explorer = false
break
default:
break
}
return this.setState({state: stateHere})
}
updateClass() {
const explorer = document.getElementById('explorer')
const jorys = document.getElementById('jorys')
const sugestions = document.getElementById('sugestions')
this.state.explorer ? explorer.classList.add('active') : explorer.classList.remove('active')
this.state.jorys ? jorys.classList.add('active') : jorys.classList.remove('active')
this.state.sugestions ? sugestions.classList.add('active') : sugestions.classList.remove('active')
}
render() {
return (
<React.Fragment>
<Router>
<Box as='main'>
<Grid
gridTemplateColumns='22% 50% 28%'
gridAutoRows='40px 100vh'
gridTemplateAreas="'. tab .' 'content content content'">
<Box
as='div'
gridArea='tab'
m='auto'
display='flex'
flexDirection='row'>
<Link to='/explorer' onClick={(e) => this.isClicked(e)}>
<Box
id='explorer'
p='5px'
fontFamily='Open Sans, sans-serif'
fontWeight='medium'
fontSize='14px'
color='black'
_active={{ color: "#C2383A", bg: "transparent"}}
_focus={{border: 'none'}} >
Publicações
</Box>
</Link>
<Link to='/jorys' onClick={(e) => this.isClicked(e)}>
<Box
id='jorys'
p='5px'
fontFamily='Open Sans, sans-serif'
fontWeight='medium'
fontSize='14px'
color='black'
_selected={{ color: "#C2383A", bg: "transparent"}}
_focus={{border: 'none'}}>
Jorys
</Box>
</Link>
<Link to='/sugestions' onClick={(e) => this.isClicked(e)}>
<Box
id='sugestions'
p='5px'
fontFamily='Open Sans, sans-serif'
fontWeight='medium'
fontSize='14px'
color='black'
_selected={{ color: "#C2383A", bg: "transparent"}}
_focus={{border: 'none'}}>
Sugestões
</Box>
</Link>
</Box>
<Box
gridArea='content'
display='flex'
justifyContent='center'
alignItems='flex-start'>
<Switch>
<Route path='/explorer'>
<TabExplorer/>
</Route>
<Route path='/jorys'>
<TabWorks/>
</Route>
</Switch>
</Box>
</Grid>
</Box>
</Router>
</React.Fragment>
)
}
}
Alguém pode me ajudar??