Question

嗨，我正在使用React Material UI标签，并且我注意到刷新后该网站并未保持该标签被选中。如何防止这种情况发生？这是材料ui标签的代码类型

class SimpleTabs extends React.Component {
  state = {
    value: 0,
  }

  handleChange = (event, value) => {
    this.setState({ value })
  }

  render() {
    const { classes } = this.props
    const { value } = this.state

    return (
      <div className={classes.root}>
        <AppBar position="static">
          <Tabs value={value} onChange={this.handleChange}>
            <Tab label="Item One" />
            <Tab label="Item Two" />
            <Tab label="Item Three" />
          </Tabs>
        </AppBar>
        {value === 0 && <TabContainer>Item One</TabContainer>}
        {value === 1 && <TabContainer>Item Two</TabContainer>}
        {value === 2 && <TabContainer>Item Three</TabContainer>}
      </div>
    )
  }
}

Answer 1

这是因为在刷新页面时组件被重新初始化，state.value被设置为0。

onChange方法需要将选定的选项卡存储在页面URL等位置。

在组件构造函数中或在componentDidMount上，需要从先前设置的存储中设置state.value。

Answer 2

只需将值设置为您的标签即可完成工作

<Tab value={0} label="Item One" />
<Tab value={1} label="Item Two" />
<Tab value={2} label="Item Three" />

Answer 3

这个简单的解决方案对我有用。使用 window.location.pathname 从浏览器获取 url，并在使用 componentDidmount 生命周期方法刷新和重新加载浏览器时更新值状态。

    class SimpleTabs extends React.Component {
      state = {
        value: 0,
      }
    
      handleChange = (event, `enter code here`value) => {
        this.setState({ value })
      }

     componentDidMount() {
     // assuming Item one as url "/" Item two as url "/itemTwo" and so on
      switch (window.location.pathname) {
      case "/":
        this.setState({ value:0 })
        break;
      case "/itemTwo":
       this.setState({ value:1 })
        break;
      case "/itemThree":
        this.setState({ value:2 })
        break;
   
      default:
        this.setState({ value })
        break;
     }
    }
    
      render() {
        const { classes } = this.props
        const { value } = this.state
    
        return (
          <div className={classes.root}>
            <AppBar position="static">
              <Tabs value={value} onChange={this.handleChange}>
                <Tab label="Item One" />
                <Tab label="Item Two" />
                <Tab label="Item Three" />
              </Tabs>
            </AppBar>
            {value === 0 && <TabContainer>Item One</TabContainer>}
            {value === 1 && <TabContainer>Item Two</TabContainer>}
            {value === 2 && <TabContainer>Item Three</TabContainer>}
          </div>
        )
      }
    }

Answer 4

我设法通过使用 useLocation 挂钩并根据路径返回状态值来解决此问题。

const currentTab = () => {
    let path = location.pathname;
    if (path === "/") return 0;
    else if (path === "/path2") return 1;
    else if (path === "/path3") return 2;
    else if (path === "/path4") return 3;
    else if (path === "/path5") return 4;
};

然后将 useState 值从 0（第一个选项卡）替换为 currentTab 函数。

const [value, setValue] = useState(currentTab);

这个解决方案对我帮助很大，在其他地方看到过，所以我希望它可以帮助任何人！

ReactJS在刷新时保持Material Ui选项卡处于选中状态

4 个答案: