javascript - 当标签为粘性时转到另一个标签后内容不需要隐藏

标签 javascript reactjs material-ui sticky

我正在使用 material UIreact-sticky,它运行良好,但我遇到了一个问题。 https://codesandbox.io/s/xv41xzvyp 我已经分享了我已经尝试过的东西。 重现步骤

  1. 转到第一个标签的底部,标签会粘住
  2. 尝试转到另一个选项卡,但内容会停留在那里,需要滚动到开始位置,然后

最佳答案

StickyContainer 组件有一个属性 node,它是对容器最顶层元素的引用,因此您可以在 ref 的帮助下将其滚动到 View 中你自己的:

class CustomizedTabs extends React.Component {
  ref = React.createRef();
  state = {
    value: 0
  };

  handleChange = (event, value) => {
    this.setState({ value }, () => this.ref.current.node.scrollIntoView());
  };

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

    return (
      <div className={classes.root}>
        <StickyContainer ref={this.ref}>{/* ... */}</StickyContainer>
      </div>
    );
  }
}

关于javascript - 当标签为粘性时转到另一个标签后内容不需要隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55298513/

相关文章:

javascript - ReactJS:如何不断检查本地存储中的 token 是否已过期?

javascript - Material-UI NativeSelect 预选选项不起作用

reactjs - 如何使用更多下拉菜单实现material-ui选项卡(如文档屏幕截图所示)

javascript - 我如何预加载与 onmouseover/onmouseout 一起使用的图像

reactjs - 警告 : [antd: Checkbox] `value` is not validate prop, 你的意思是 `checked` 吗?

javascript - MeteorJS 我似乎无法从服务器获取对象的属性

reactjs - 在 map 中 react setState

reactjs - react Material -ui 选择不起作用

php - 如何使用 PHP Curl 模拟启用 JavaScript?

javascript - 在 JavaScript 函数中声明变量