Типография «Логотип» и «домашняя» вкладка имеют одинаковый путь, но когда я нажимаю на типографику, выбранная вкладка остается на предыдущей выбранной и не переходит в «домашнюю»
Iпробовал, если операторы, реализующие подпрограммы onClick, а также новую функцию, связанную с «значениями», меняются, но безрезультатно, при последней попытке он изменяется на заданное значение и остается там, даже если вы пытаетесь выбрать другую вкладку.Ниже я опубликую код перед различными попытками.
import React, {Component, Fragment} from 'react';
import AppBar from '@material-ui/core/AppBar';
import CssBaseline from '@material-ui/core/CssBaseline';
import Drawer from '@material-ui/core/Drawer';
import Hidden from '@material-ui/core/Hidden';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import { makeStyles, withStyles } from '@material-ui/core/styles';
import SearchBar from '../TopBar/SearchBar'
import Home from '../Screens/Home'
import home from '../home.svg';
import Contact from '../Screens/Contact'
import contact from '../contact.svg';
import Profile from '../Screens/Profile'
import profile from '../profile.svg';
import Settings from '../Screens/Settings'
import settings from '../settings.svg'
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab"
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import { Switch, Route, Link, BrowserRouter} from "react-router-dom";
const VerticalTabs = withStyles(theme => ({
flexContainer: {
flexDirection: "column"
},
indicator: {
display: "none"
},
root:{
position:"fixed",
left:-70,
top:0,
},
}))(Tabs);
const MyTab = withStyles(theme => ({
selected: {
color: "white",
borderRight: "none",
},
root: {
margin:0,
paddingBottom:119
},
'@media screen and (min-width: 600px) and (max-width: 1205px)':{
root: {
minWidth: 151,
}
},
'@media screen and (max-height: 765px) and (min-width: 600px)':{
root: {
minWidth: 151,
paddingBottom:85
}
},
'@media screen and (min-width: 1206px)and (min-height: 766px)':{
root: {
minWidth: 170,
}
},
'@media screen and (max-width: 599px) and (min-height: 841px)':{
root: {
minWidth: 300,
paddingBottom:115
}
},
'@media screen and (max-height: 840px) and (max-width: 599px)':{
root: {
minWidth: 300,
paddingBottom:85
}
},
'@media screen and (min-width: 1206px)and (max-height: 765px)':{
root: {
minWidth: 170,
paddingBottom:91
}
},
}))(Tab);
const styles = theme => ({
root: {
flexGrow: 1,
marginTop: theme.spacing(3)
,
backgroundColor: theme.palette.background.paper,
display: 'flex',
},
tabRoot: {
minWidth: 10,
},
menuButton:{
visibility: "hidden"
},
appBar: {
marginLeft: 300,
},
drawerPaper: {
width: 100,
background: "#262A2C",
fontSize:65,
height:"100%",
top:0
},
content: {
flexGrow: 1,
padding: theme.spacing(3),
},
'@media screen and (min-width: 600px) and (max-width: 1205px)':{
drawerPaper: {
width: 80,
//background: "black"
},
},
'@media (max-width: 599px)':{
drawerPaper: {
width: 230,
//background: "black"
},
appBar: {
},
menuButton:{
visibility: "visible",
top:20
},
},
'@media (max-height: 599px)':{
menuButton:{
top:17
}
}
});
class StaticComponents extends React.Component {
constructor(props) {
super(props);
this.state = {
values: 0,
mobileOpen: false,
};
this.handleChange = this.handleChange.bind(this);
this.handleDrawerToggle = this.handleDrawerToggle.bind(this)
this.closeDrawer = this.closeDrawer.bind(this)
//binds the function not its variable
}
handleChange=(_,values)=>this.setState({ values });
handleDrawerToggle(){
const toggleDrawer= this.state.mobileOpen === false ? true : false;
this.setState({mobileOpen: toggleDrawer})
}
closeDrawer(){
const closeD= this.state.mobileOpen=false;
this.setState({mobileOpen: closeD})
}
//handleChange = (_, values) => this.setState({ values });
//handleDrawerToggle = (_, mobileOpen) => this.setState({ mobileOpen });
render(){
const {classes} = this.props;
const drawer = (
<Route
path="/"
render={() => (
<nav>
<div style={{ left: 70, position: "relative", marginTop: 40 }}>
<VerticalTabs value={this.state.values} variant="fullWidth" onChange={this.handleChange}
>
<MyTab
component={Link} to="../Screens/Home"
icon ={<img
className= "home"
src={home}
alt="home"
/*Pay FlatIcon or replace by design *//>}
label={<p className="home-Text" >
Home
</p>}
/>
<MyTab
component={Link} to="../Screens/Contact"
icon ={<img
className= "contact"
src={contact}
alt="contact"
/*Pay FlatIcon or replace by design *//>}
label={<p className="contacts-Text" >
Contact
</p>}
/>
<MyTab
component={Link} to="../Screens/Profile"
icon={<img
className= "profile"
src={profile}
alt="profile"
/*Pay FlatIcon or replace by design *//>}
label={<p className= "profile-Text" >
Profile
</p>}
/>
<MyTab
component={Link} to="../Screens/Settings"
icon = {<img
className= "settings"
src={settings}
alt="settings"
/*Pay FlatIcon or replace by design *//>}
label={<p className="hsettings-Text" >
Settings
</p>}
/>
</VerticalTabs>
</div>
</nav>
)}
/>
);
return (
<nav>
<BrowserRouter>
<div className="aBar">
<CssBaseline />
<AppBar style={{position:"relative",background: 'transparent', boxShadow: 'none', color: "red"}}>
<Toolbar>
<IconButton
color="inherit"
aria-label="Open drawer"
edge="start"
onClick={this.handleDrawerToggle}
className={classes.menuButton}
>
<MenuIcon />
</IconButton>
<SearchBar />
<div className="logo">
<Typography
component={Link}
to="/"
className= "logo-Spec"
style={{fontSize:30, textDecoration: 'none' }}
variant="h1"
>
Logo
</Typography>
</div>
</Toolbar>
</AppBar>
<nav >
{/* The implementation can be swapped with js to avoid SEO duplication of links. */}
<Hidden smUp implementation="css">
<Drawer
style={{color:"black"}}
variant="temporary"
open={this.state.mobileOpen}
onClose={this.closeDrawer}
classes={{
paper: classes.drawerPaper,
}}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
>
{drawer}
</Drawer>
</Hidden>
<Hidden xsDown implementation="css">
<Drawer
classes={{
paper: classes.drawerPaper,
}}
variant="permanent"
>
{drawer}
</Drawer>
</Hidden>
<Switch>
<Route path="../Screens/Home" component={Home}/>
<Route path="../Screeens/Contact" component={Contact}/>
<Route path="../Screeens/Profile" component={Profile}/>
<Route path="../Screeens/Settings" component={Settings}/>
</Switch>
</nav>
</div>
</BrowserRouter>
</nav>
);
}
}
export default withStyles(styles)(StaticComponents);