(Реакция) Повторная визуализация анимации компонентов внутри модальной модели на основе функции onClick внутри модальной модели.

Question

Я пытаюсь получить анимацию для рендеринга на экране, используя функцию onClick из модального окна. Так что у меня есть форма для входа и регистрации, которая находится внутри модальной. Я хочу, чтобы форма внутри модального окна переключалась между входом в систему или регистрировалась с анимацией при нажатии из модального окна. Модал ведет себя правильно изначально при нажатии. Но как только модал активен, и когда я нажимаю кнопки входа / регистрации в модале, он рендерится только в первый раз.

Примечание. Я использую Animate.css для анимации.

Ниже приведен код.

import React, { Component } from 'react';
import { Form, Input, Button, Modal } from 'semantic-ui-react';
import firebase from './Firebase';

class SignInAndRegisterForm extends Component {
state = {
    firstName: '',
    lastName: '',
    email: '',
    password: '',
    triggered: false,
    triggeredReg: false,
    onRegFromSignInModal: false,
    onSignInFromRegModal: false
};

onSubmit() {
    firebase
        .auth()
        .createUserWithEmailAndPassword(this.state.email, 
this.state.password);
}

onSignInOpenModal() {
    this.setState({
        triggered: true,
        triggeredReg: false,
        onRegFromSignInModal: false,
        onSignInFromRegModal: false
    });
}

onRegOpenModal() {
    this.setState({
        triggeredReg: true,
        triggered: false,
        onRegFromSignInModal: false,
        onSignInFromRegModal: false
    });
}

onCloseModal() {
    this.setState({
        triggeredReg: false,
        triggered: false,
        onRegFromSignInModal: false,
        onSignInFromRegModal: false
    });
}

onRegFromSignInModal() {
    this.setState({
        onRegFromSignInModal: true,
        onSignInFromRegModal: false,
        triggeredReg: false,
        triggered: false
    });
}

onSignInFromRegModal() {
    this.setState({
        onSignInFromRegModal: true,
        onRegFromSignInModal: false,
        triggeredReg: false,
        triggered: false
    });
}

renderModal() {
    if (this.state.triggered || this.state.onSignInFromRegModal) {
        return this.renderSignInForm();
    }

    if (this.state.triggeredReg || this.state.onRegFromSignInModal) {
        return this.renderRegForm();
    }
}

Внутри этих двух функций находятся кнопки для переключения между входом в систему и регистрацией в модале. Анимация настроена на изменение в зависимости от изменения состояния. Однако, это только делает один раз. Первый раз, когда я нажимаю на любой из них.

renderSignInForm() {
    return (
        <div
            className={
                'SignInForm' +
                (this.state.onSignInFromRegModal
                    ? 'animated bounceIn'
                    : 'animated fadeIn delay-0.8s')
            }
        >
            <Modal.Header>Sign In</Modal.Header>
            <Modal.Content>
                <Modal.Description>
                    <Form onSubmit={this.onSubmit.bind(this)}>
                        <Form.Field>
                            <Input
                                label="Email"
                                value={this.state.email}
                                onChange={event =>
                                    this.setState({ email: event.target.value })
                                }
                            />
                            <Input
                                label="Password"
                                value={this.state.password}
                                onChange={event =>
                                    this.setState({ password: event.target.value })
                                }
                            />
                        </Form.Field>
                        <Button primary>Sign In</Button>
                    </Form>
                    <p>Register</p>
                    <Button onClick={this.onRegFromSignInModal.bind(this)}>
                        New!!!!!!!!!!!!!!!!
                    </Button>
                </Modal.Description>
            </Modal.Content>
        </div>
    );
}

renderRegForm() {
    return (
        <div
            className={
                'RegisterForm' +
                (this.state.onRegFromSignInModal
                    ? 'animated bounceIn'
                    : 'animated fadeIn delay-0.8s')
            }
        >
            <Modal.Header>Register</Modal.Header>
            <Modal.Content>
                <Modal.Description>
                    <Form onSubmit={this.onSubmit.bind(this)}>
                        <Form.Field>
                            <Input
                                label="Email"
                                value={this.state.email}
                                onChange={event =>
                                    this.setState({ email: event.target.value })
                                }
                            />
                            <Input
                                label="Password"
                                value={this.state.password}
                                onChange={event =>
                                    this.setState({ password: event.target.value })
                                }
                            />
                            <Input
                                label="Something"
                                value={this.state.password}
                                onChange={event =>
                                    this.setState({ password: event.target.value })
                                }
                            />
                        </Form.Field>
                        <Button primary>Register</Button>
                    </Form>
                    <p>Sign In</p>
                    <Button onClick={this.onSignInFromRegModal.bind(this)}>
                        Old!!!
                    </Button>
                </Modal.Description>
            </Modal.Content>
        </div>
    );
}

---

 render() {
    return (
        <div>
            <Button onClick={this.onSignInOpenModal.bind(this)}>Sign In</Button>
            <Button onClick={this.onRegOpenModal.bind(this)}>Register</Button>
            <Modal
                className="SignInAndRegisterForm animated fadeIn delay-0.5s"
                size="tiny"
                open={
                    this.state.triggered ||
                    this.state.triggeredReg ||
                    this.state.onRegFromSignInModal ||
                    this.state.onSignInFromRegModal
                }
                onClose={this.onCloseModal.bind(this)}
            >
                {this.renderModal()}
            </Modal>
        </div>
    );
  }
 }
 export default SignInAndRegisterForm;

Действительно ценю вашу помощь в этом!