Как открыть реагирующую модальную модель, если условие не выполнено - PullRequest
Новая
       9

Как открыть реагирующую модальную модель, если условие не выполнено

0 голосов
/ 12 января 2020

У меня есть модель реактивной ленты для входа в систему пользователя, и мне нужно открыть модель, как только пользователь нажмет на страницу категорий, если пользователь не аутентифицирован. Состояние аутентификации сохраняется и извлекается из хранилища приставок, но я не знаю, как открыть модальный режим, когда пользователь не аутентифицирован. Как мне это сделать? В настоящее время модальное окно открывается как 

render() {
    return (
      <div>
          <NavLink
            style={{ color:'#fff'}}
            href="#"
            onClick={this.toggle}
          >
            Login
          </NavLink>

        <Modal isOpen={this.state.modal} toggle={this.toggle}>
          <ModalHeader toggle={this.toggle}>Login</ModalHeader>
          { this.state.msg ? <Alert color="danger">{this.state.msg}</Alert> : null }
          <ModalBody>
            <Form onSubmit={this.onSubmit}>
              <FormGroup>

                <Label for='email'>Email</Label>
                <Input
                  type='email'
                  name='email'
                  id='email'
                  className='mb-3'
                  placeholder='Email'
                  onChange={this.onChange}
                />

                <Label for='password'>Password</Label>
                <Input
                  type='password'
                  name='password'
                  className='mb-3'
                  id='password'
                  placeholder='Password'
                  onChange={this.onChange}
                />


                <Button color='dark' style={{ marginTop: '2rem' }} block>
                  Login
                </Button>
              </FormGroup>
            </Form>
          </ModalBody>
        </Modal>
      </div>
    );
  }
}

Элемент навигации по категориям 

<NavItem>
                                    <Link
                                        style={{
                                        color: "#fff"
                                    }}
                                        to={`/${this.props.business.business.businessId}/categories`}>
                                        <NavLink
                                            style={{
                                            color: "#fff"
                                        }}>
                                            Categories
                                        </NavLink>
                                    </Link>
                                </NavItem>
...