onScroll 在 div 底部时禁用按钮

Question

尝试实现与流行的 T&C 操作类似的功能，当您向下滚动到 div 的最底部时，'accept' 按钮会启用，因此您可以点击它。

在这个例子中，我使用的是 material-UI 组件，当我在组件中添加 'disabled' 时按钮会被禁用，仅此而已。

代码如下：

import React from 'react';
import PropTypes from 'prop-types';
import Modal from '@material-ui/core/Modal';
import Button from '@material-ui/core/Button';
import './terms-popup.scss';

const handleScroll = (e) => {
    const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
    if (bottom) { console.log('bottom is reached'); }
};

const TermsPopup= ({
    isModalOpen,
    isOpen,
    title,
    closeLabel,
    showCloseButton,
}) => {
    return (
        <Modal
            aria-labelledby="simple-modal-title"
            aria-describedby="simple-modal-description"
            open={isOpen}
            onClose={() => isModalOpen(false)}
        >
            <div className="terms-container">
                <div className="terms-header">
                    <h2>{title}</h2>
                </div>
                <div
                    className="terms-body"
                    onScroll={handleScroll}
                >
                    <h3>Sample title</h3>
                    <p>Sample description would go here</p>
                <div className="terms-footer">
                    {(showCloseButton) ? (
                        <Button
                            variant="contained"
                            type="button"
                            onClick={() => isModalOpen(false)}
                        >
                            {closeLabel}
                        </Button>
                    ) : null}
                </div>
            </div>
        </Modal>
    );
};

TermsPopup.propTypes = {
    isModalOpen: PropTypes.func.isRequired,
    isOpen: PropTypes.bool.isRequired,
    title: PropTypes.string.isRequired,
    closeLabel: PropTypes.string,
    showCloseButton: PropTypes.bool,
};

TermsPopup.defaultProps = {
    closeLabel: 'accept',
    showCloseButton: true,
};

export default TermsPopup;

我想要实现的是，当到达底部时，按钮应更改为：

<Button
variant="contained"
type="button"
onClick={() => isModalOpen(false)}
disabled
/>

Answer 1

将您的 onScroll 事件处理程序移动到组件本身，并在到达底部时使用 React 状态更新您的组件。您可以使用状态变量然后在 Button 组件上设置 'disabled' 属性。

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import Modal from '@material-ui/core/Modal';
import Button from '@material-ui/core/Button';
import './terms-popup.scss';


const TermsPopup= ({
    isModalOpen,
    isOpen,
    title,
    closeLabel,
    showCloseButton,
}) => {

    const [bottom, setBottom] = useState(false);

    const handleScroll = (e) => {
        const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
        setBottom(bottom)
    };

    return (
        <Modal
            aria-labelledby="simple-modal-title"
            aria-describedby="simple-modal-description"
            open={isOpen}
            onClose={() => isModalOpen(false)}
        >
            <div className="terms-container">
                <div className="terms-header">
                    <h2>{title}</h2>
                </div>
                <div
                    className="terms-body"
                    onScroll={handleScroll}
                >
                    <h3>Sample title</h3>
                    <p>Sample description would go here</p>
                <div className="terms-footer">
                    {(showCloseButton) ? (
                        <Button
                            variant="contained"
                            type="button"
                            onClick={() => isModalOpen(false)}
                            disabled={bottom}
                        >
                            {closeLabel}
                        </Button>
                    ) : null}
                </div>
            </div>
        </Modal>
    );
};

onScroll 在 div 底部时禁用按钮

onScroll when at the bottom of the div then disable button

onscroll

reactjs