OnScroll, когда в нижней части Div затем отключить кнопку - PullRequest
Новая
       57

OnScroll, когда в нижней части Div затем отключить кнопку

0 голосов
/ 02 апреля 2020

Попытка добиться чего-то похожего на популярные действия T & C, когда вы прокрутите вниз до самого низа кнопки «Принять» div, вы сможете нажать на нее.

Для этого Например, я использую компоненты UI материала и кнопка становится отключенной, когда я добавляю «отключено» внутри компонента, вот и все.

Вот код: 

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
/>

1 Ответ

1 голос
/ 02 апреля 2020

Переместите ваш обработчик событий onScroll в сам компонент и используйте состояние React для обновления вашего компонента, когда будет достигнут нижний уровень. Вы можете использовать переменную состояния, чтобы затем установить «отключенную» опору для вашего компонента Button. 

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