当标签粘滞时,在转到另一个标签后不需要隐藏内容

问题描述 投票:1回答:1

我正在使用material UIreact-sticky及其工作的好,但我有一个问题。 https://codesandbox.io/s/xv41xzvyp我已经分享了我的尝试。重现的步骤

  1. 转到第一个标签的底部,标签将会粘住
  2. 尝试去另一个标签,但内容将留在那里需要滚动到开始位置和
javascript reactjs material-ui sticky
1个回答
1
投票

StickyContainer组件有一个属性node,它是容器最顶层元素的引用,因此您可以借助自己的引用将其滚动到视图中:

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>
    );
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.