警报不适用于 React Hooks 和 Bootstrap

Posted 2023-03-13

【中文标题】警报不适用于 React Hooks 和 Bootstrap

【英文标题】：Alert not working with React Hooks & Bootstrap

【发布时间】：2021-01-03 02:43:25

【问题描述】：

我正在构建一个项目，人们可以在其中提名他们最喜欢的电影。我也在尝试 当点击提交按钮提交所有提名时显示警报。

return (

        <React.Fragment>

            <div id="nomination-div">

                Your Nominations

                generateNominationCards()

                <Button
                    variant="primary" onClick=() => submitNominations()>
                    Submit Nominations
                </Button>

            </div>

        </React.Fragment>
    );
    ```

Here is the code I have for my ```submitNominations()``` button.

function submitNominations()

    return(
        <Alert variant="success">
        <Alert.Heading>Hey, nice to see you</Alert.Heading>
        <p>
            Aww yeah, you successfully read this important alert message. This example
            text is going to run a bit longer so that you can see how spacing within an
            alert works with this kind of content.
        </p>
        <hr />
        <p className="mb-0">
            Whenever you need to, be sure to use margin utilities to keep things nice
            and tidy.
        </p>
        </Alert>
    )

I'm using this link as my guide: https://react-bootstrap.github.io/components/alerts/

I have <Alerts> defined in a separate file with the rest of my react-bootstrap components like so 

    const Jumbotron = ReactBootstrap.Jumbotron;
    const Badge = ReactBootstrap.Badge;
    const Alert = ReactBootstrap.Alert;
    const Carousel = ReactBootstrap.Carousel;


Nothing is currently showing up or happening for me at all.

【参考方案1】：

在 React 中显示的警报之类的东西通常是状态驱动的，所以在这种情况下，你可能有一个 showAlert 布尔状态值并将其设置为 true 当你想要显示警报。然后，只需有条件地在返回的 JSX 中呈现警报内容。请参阅下面的示例，了解这可能如何工作。

function MyComponent() 
    const [showAlert, setShowAlert] = useState(false);

    const submitNominations = () => 
        setShowAlert(true);
    

    return (
        <React.Fragment>
            showAlert && (
                <Alert variant="success">
                    <Alert.Heading>Hey, nice to see you</Alert.Heading>
                    <p>
                        Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
                    </p>
                    <hr />
                    <p className="mb-0">
                        Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
                    </p>
                </Alert>
            )
            <div id="nomination-div">
                Your Nominations
                generateNominationCards()
                <Button
                    variant="primary" onClick=() => submitNominations()>
                    Submit Nominations
                </Button>
            </div>
        </React.Fragment>
    );