Переключение модального режима добавляет нежелательные отступы (реагирующий ремень) - PullRequest
Новая
       14

Переключение модального режима добавляет нежелательные отступы (реагирующий ремень)

0 голосов
/ 30 сентября 2018

Я использую реагирующий ремень, и у меня есть два мода.
Внутри каждого мода есть кнопка для "переключения" на другой мод.
Работает нормально, но с одной маленькой проблемой: переключение на другой мод, затем закрытие приводит к генерации нежелательного заполнения (в частности, padding-right: 17px) для тега body

Что вызывает такое поведение?

Вот соответствующий код: 

class App extends Component {

    state = {
        registerModal: true,
        loginModal: false
    };

    render() {
        return (
            <React.Fragment>
                    <RegisterModal toggleRegisterModal={this.toggleRegisterModal} registerModal={this.state.registerModal} />
                    <LoginModal toggleLoginModal={this.toggleLoginModal} loginModal={this.state.loginModal} />
            </React.Fragment>
        );
    }

    toggleRegisterModal = (toggleToLogin = false) => (e) => {
        if (toggleToLogin === false) {
            this.state.registerModal === true ? this.setState({ registerModal: false }) : this.setState({ registerModal: true });
        } else {
            this.setState({ registerModal: false, loginModal: true });
        }
    }

    toggleLoginModal = (toggleToRegister = false) => (e) => {

        if (toggleToRegister === false) {
            this.state.loginModal === true ? this.setState({ loginModal: false }) : this.setState({ loginModal: true });
        } else {
            this.setState({ loginModal: false, registerModal: true });
        }

    }   
}

Модальный код: (примечание: очень похожий код с LoginModal) 

import React, { Component } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

export default class RegisterModal extends Component {
    render() {
        return (
            <Modal isOpen={this.props.registerModal} toggle={this.props.toggleRegisterModal()}>
                <ModalHeader toggle={this.props.toggleRegisterModal()}>Modal title</ModalHeader>
                <ModalBody>
                    <span>Register</span>
                    <Button onClick={this.props.toggleRegisterModal(true)}>Switch to Login</Button>
                </ModalBody>
                <ModalFooter>
                    <Button color="primary" onClick={this.props.toggleRegisterModal()}>Do Something</Button>{' '}
                    <Button color="secondary" onClick={this.props.toggleRegisterModal()}>Cancel</Button>
                </ModalFooter>
            </Modal>
        );
    }
}
...