Hello i have a modal with terms and conditions and i want to make the button that the user agrees enable when has reached the end of the modal. I am using react class components and the modal is a component from 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>

As you can see the button in on the footer of the modal. I was thinking using refs but modal on antd design has not ref attribute. On componentDidMount i was thinking add this this.modalRef.current.removeEventListener('scroll', this.handleScroll) an the handleScroll function be like this

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

But this not working. Anyone has an idea ?

CodePudding user response：

Put a div at the bottom of the modal. Use IntersectionObserver to track if the user has reached the bottom. Then update the state

A boolean state is enough for your use case, not need to update it on each scroll

CodePudding user response：

So it might seem a little bit daunting with you. You can check out this hook https://usehooks.com/useOnScreen/

It seems you using Class Component, just using componentDidMount instead of useEffect and componentWillUnmount to unobserve as same as return of useEffect.

Ref is attribute of Button ả footer.

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);
}

Enjoy !