当用户在reactjs中到达模态末尾时启用按钮

lp0sw83n 于 2023-02-03 发布在 React

关注(0)|答案(2)|浏览(97)

你好，我有一个带有条款和条件的模态，我想让用户同意的按钮在到达模态末尾时启用。我使用react类组件，模态是来自antd的组件。

render() {
    return(
        <Modal 
            title={
                <h1>
                    <b>Terms and Conditions</b>
                </h1>
            }
            open={this.state.visible}
            width={800}
            bodyStyle={{ height: '400px', overflowY: 'auto'}}
            closable={false}
            footer={                    
                <Button 
                    type="primary"
                    disabled={this.state.agreeTerm} 
                >
                    Accept
                </Button>
            }
        >
        <div>......</div>
        </Modal>

正如你所看到的按钮在页脚的模态。我想使用参考，但模态的andd设计没有参考属性。在componentDidMount上，我想添加这个this.modalRef.current.removeEventListener('scroll', this.handleScroll)和handleScroll函数是这样的

handleScroll = () => {
    console.log('ref is  :', this.modalRef.current)
    const { scrollTop, scrollHeight, clientHeight } = this.modalRef.current
    this.setState({
      agreeTerm: scrollTop + clientHeight < scrollHeight
    })
}

但这样不行。有人有办法吗？

reactjs

来源：https://stackoverflow.com/questions/75324649/enable-a-button-when-the-user-has-reached-the-end-of-the-modal-in-reactjs

2条答案

按热度按时间

j7dteeu81#

在modal的底部放置一个div，使用IntersectionObserver跟踪用户是否到达底部，然后更新状态
布尔状态对于您的用例来说已经足够了，不需要在每次滚动时更新它

赞(0）回复(0）举报 2023-02-03

c0vxltue2#

因此，您可能会觉得这有点令人生畏。您可以查看这个钩子https://usehooks.com/useOnScreen/
看起来您使用了类组件，只是使用了componentDidMount而不是useEffect，并且componentWillUnmount来取消观察，与返回useEffect相同。

Ref是页脚按钮的属性。

observer = new IntersectionObserver(
  ([entry]) => {
   // Update our state when observer callback fires
   this.setState({intersecting: entry.isIntersecting});
  },
  { rootMargin }
);

componentDidMount() {
  if (this.ref.current) {
      this.observer.observe(this.ref.current);
  }
}

componentWillUnmount() {
 this.observer.unobserve(this.ref.current);
}

好好享受吧！

赞(0）回复(0）举报 2023-02-03

我来回答

当用户在reactjs中到达模态末尾时启用按钮

2条答案

相关问题

热门标签

最新问答