反应可滑动标签

Question

我是一个初学者反应用户，并试图结合简单的可滑动选项卡的移动观看者。(类似于instagram配置文件上的选项卡)

我找到了反应-可滑动的视图和材料用户界面，并尝试使用它。

如果我单击Tab菜单，它似乎是有效的，但问题是，当我滑动选项卡主体时，选项卡菜单/索引没有得到更新。

如果有人知道更好的方法来做这件事，请与我分享你的智慧。

import { useState } from "react";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import SwipeableViews from "react-swipeable-views";

const TabContent = (props) => {
  const [index, setIndex] = useState(0);

  return (
    <>
      <Tabs value={index} fullWidth onChange={()=>setIndex(value)}>
        <Tab label="tab 1" />
        <Tab label="tab 2" />
        <Tab label="tab 3" />
      </Tabs>

      <SwipeableViews
        index={index}
        onChangeIndex={() => setIndex(index)}
        enableMouseEvents
        animateHeight
      >
            <div>tab 1</div>
            <div>tab 2</div>
            <div>tab 3</div>
     </SwipeableViews>
    </>

)

export default TabContent;

谢谢!

Answer 1

onChangeIndex={index => setIndex(index)} 

否则，您将从状态更改为索引，这是当前索引:)