当用户到达 reactjs 中模式的末尾时启用按钮答案

【问题标题】：Enable a button when the user has reached the end of the modal in reactjs当用户到达 reactjs 中模式的末尾时启用按钮
【发布时间】：2023-02-02 22:41:26
【问题描述】：

您好，我有一个带有条款和条件的模态，我想在到达模态末尾时制作用户同意启用的按钮。我正在使用 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>

如您所见，模态页脚中的按钮。我在考虑使用 refs 但 antd design 上的模态没有 ref 属性。在 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
    })
}

但这不起作用。有人有想法吗？

【问题讨论】：

标签： javascript reactjs antd

【解决方案1】：

在模态底部放置一个 div。使用 IntersectionObserver 来跟踪用户是否到达底部。然后更新状态

布尔状态足以满足您的用例，不需要在每次滚动时更新它

【讨论】：