![](/img/trans.png)
[英]Material-UI tab indicator does not change when previous button is pressed
[英]Material-UI tab indicator returns back to the first tab item when i reload the page
我用反应路由器实现了 material-ui 选项卡。 当我单击一个选项卡时,选项卡指示器(选项卡下方的一条蓝线)按预期工作,它会移动到按下哪个选项卡。 问题在于,当我重新加载页面时,选项卡指示器会返回到第一个选项卡项。
我在想这可能是因为选项卡的初始值为零,所以当重新加载页面时,该值再次变为零。
import React, { useState } from 'react';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import SignIn from '../signIn/SignIn'
import SignUp from '../signUp/SignUp';
import About from '../about/About';
import NavbarStyles from './NavbarStyles';
import { Link, Switch, Route } from 'react-router-dom';
import { Paper } from '@material-ui/core';
/**
* This component handles the routing and navigating the user to different sections
*/
export default function Navbar() {
const classes = NavbarStyles();
const [value, setValue] = useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<div className={classes.root}>
<Paper>
<Tabs
value={value}
onChange={handleChange}
variant="scrollable"
scrollButtons="on"
indicatorColor="primary"
textColor="primary"
aria-label="scrollable force tabs example"
>
<Tab label="Sign In" to="/signin" component={Link} />
<Tab label="Sign Up" to="/signup" component={Link} />
<Tab label="About" to="/about" component={Link} />
</Tabs>
</Paper>
<Switch>
<Route component={SignIn} path="/signin" />
<Route component={SignUp} path="/signup" />
<Route component={About} path="/about" />
</Switch>
</div>
);
}
import { makeStyles } from '@material-ui/core/styles';
// This component contains the styles that is being used by its intented component
export default function NavbarStyles() {
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
width: '100%',
backgroundColor: theme.palette.background.paper,
},
}));
return useStyles();
}
有同样的问题,这就是我解决它的方法。 它重置为主页,因为在页面刷新时,Tabs 的初始值为 0。为了防止这种情况,请在 handleChange function 正下方添加一个带有依赖数组的 useEffect。
useEffect(() => {
let path = props.location.pathname;
if (path === "/signin" && value !== 0) setValue(0);
else if (path === "/signup" && value !== 1) setValue(1);
else if (path === "/about" && value !== 2) setValue(2);
}, [value,]);
这会在页面重新加载时设置适当的选项卡值
这是基于 Firealem Erkos 代码。 刷新时,我要加载 0,然后高亮栏会滑到我当前的位置.. 看起来很奇怪.. 所以我没有用 usestate(0) 替换 0 为 currentTab ...我计算了显示在下面的代码。 现在,当您刷新时, 0 不会短暂突出显示。
const currentTab = () => {
let path = window.location.pathname
if (path === "/Search") return 1
else if (path === "/ZoneInformation") return 2
else if (path === "/Contact") return 3
}
const [value, setValue] = React.useState(**currentTab**);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.