0

我是一个初学者反应用户，并且正在尝试为移动查看器合并简单的可滑动标签。（类似于 instagram 个人资料上的标签）

我找到了 react-swipeable-views 和 Material UI 并尝试使用它。

如果我单击选项卡菜单，它似乎正在工作，但问题是当我滑动选项卡正文时选项卡菜单/索引没有得到更新。

如果有人知道更好的方法来做到这一点或使这项工作，请与我分享你的智慧

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;

谢谢！

4

1 回答 1

1 
onChangeIndex={index => setIndex(index)}

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

于 2022-01-17T18:44:59.247 回答