Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Изменение компонентов в redux  [new]
Tsyklop
Member

Откуда: Украина
Сообщений: 1024
Есть страница авторизации/регистрации/правил:

class OwnerAuthPage extends BasePage {

    constructor(props) {

        super("Owner Login", props);

        this.state = {
            activeTab: 'signInTab'
        };

        this.toggle = this.toggle.bind(this);

    }

    toggle(tab) {
        if (this.state.activeTab !== tab) {
            this.setState({
                activeTab: tab
            });
        }
    }

    render() {
        return (
            <main className="w-100 h-100 d-flex justify-content-center align-items-center">
                <Container>
                    <Row className="h-100 justify-content-center">
                        <Col xs={"12"} sm={"12"} md={"8"} lg={"6"} xl={"6"}>
                            <div className="entry-box-wrapper">
                                <div className="entry-box modal-content">
                                    <div className="modal-body">

                                        <AuthNav activeTab={this.state.activeTab} toggle={this.toggle}/>

                                        <Logo className={"d-block mx-auto mt-4"}/>

                                        <TabContent activeTab={this.state.activeTab}>
                                            <SignInTab />
                                            <SignUpTab openSignInTab={this.openSignInTab}/>
                                            <TermsTab />
                                        </TabContent>

                                    </div>
                                </div>
                            </div>
                        </Col>
                    </Row>
                </Container>
                <ToastContainer position={toast.POSITION.BOTTOM_RIGHT}/>
            </main>
        );
    }
}

const mapStateToProps = (state, ownProps) => {
    return {

    };
};

export default connect(mapStateToProps)(OwnerAuthPage);


(Верстал изначально не я)

Тут есть табы сделанные при помощи reactstrap.

Их 3:

<div className="modal-body">

    <AuthNav activeTab={this.state.activeTab} toggle={this.toggle}/>

    <Logo className={"d-block mx-auto mt-4"}/>

    <TabContent activeTab={this.state.activeTab}>
        <SignInTab />
        <SignUpTab openSignInTab={this.openSignInTab}/>
        <TermsTab />
    </TabContent>

</div>


Таб SignInTab подключается к редаксу через connect.

Как видно страница имеет стэйт где храниться активная вкладка. Проблема в том что таб SignInTab не пропадает, если переключать вкладки. НО. если убрать connect то все работает. Почему так происходит?

Подключать все табы к редаксу не вижу смысла ибо активная вкладка относится именно к табам. Модет я и не прав.
17 янв 19, 14:55    [21787945]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить