Чего мне не хватает в этом примере Alert React Bootstrap? - PullRequest
Новая
       2

Чего мне не хватает в этом примере Alert React Bootstrap?

0 голосов
/ 19 февраля 2020

Это был день, и моя голова кровоточит от того, что я бью его об эту стену: два легко реагирующих - bootstrap Предупреждающих примера, которые невидимы. Я вручную отредактировал стиль и удалил стиль «исчезать» (для предупреждения под названием «проверить его»), и предупреждение отображается. Но они оба должны показываться по умолчанию.

Что я сделал не так? Я новичок в React. Но я не ожидал, что такой простой пример будет go неправильным. 

import React, { useState } from 'react';
import { Button, FormGroup, FormControl, FormLabel } from 'react-bootstrap';
import { Alert } from 'react-bootstrap';
import '../styles/login.css';

const Login: React.FC<{}> = () => {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");  

...

    return (
        <div className="Login"> 
            <form onSubmit={handleSubmit}>
                <FormGroup controlId="email">
                    <FormLabel>Email</FormLabel>
                    <FormControl
                        autoFocus
                        type="string"
                        value={email}
                        onChange={(e: any) => setEmail(e.target.value)} />
                </FormGroup>
                <FormGroup controlId="password">
                    <FormLabel>Password</FormLabel>
                    <FormControl
                        value={password}
                        onChange={(e: any) => setPassword(e.target.value)}
                        type="password" />
                </FormGroup>
                <Button block disabled={!validateForm()} type="submit">
                    Login
                </Button> 

                <Alert key={1} variant="success">check it out!</Alert> 

                <Alert show={true} variant="success">
                    <Alert.Heading>Oh snap! You got an error!</Alert.Heading>
                    <p>
                        Change this and that and try again. Duis mollis, est non commodo
                        luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
                        Cras mattis consectetur purus sit amet fermentum.
                    </p>
                </Alert>
            </form> 
        </div>
    );
}

export default Login;

Removing 'fade' from the element style shows the element

1 Ответ

0 голосов
/ 19 февраля 2020

Хорошо, хорошо, примеры в официальной документации по умолчанию исчезают. Это означает, что они не показывают. Это не официально, потому что документы по реагированию - bootstrap не говорят этого - документы по реактивному ремню делают. Reactstrap - это конкурирующий пакет для реагирования-повышения.

Похоже, что переход по умолчанию «исчезает». Это означает, что новичок будет использовать пример и вообще ничего не видеть.

Реакционные документы bootstrap упоминают переходную группу, но не говорят, что по умолчанию они имеют значение false. Они также не говорят, как express встроить переход. Я пытался: transition = {{Fade: {in: false}}. Если вам нужно это увидеть, посмотрите здесь . Я пробовал встроенный и через элемент, но не go.

. Если я переключаюсь на реагирующую ленту, пример предупреждения показывается с кодом ниже: 

 <Alert color='primary' fade={false}>check it out!</Alert>

, который выглядит как намного проще, чем бороться с реактивной - bootstrap бета. Поэтому я буду использовать реакционную ленту для предупреждения.

...