如何解决警报不适用于 React Hooks 和 Bootstrap
我正在建立一个项目,让人们可以提名他们最喜欢的电影。我也在尝试 单击提交按钮以提交所有提名时显示警报。
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.
解决方法
React 中是否显示警报之类的内容通常是状态驱动,因此在这种情况下,您可能有一个 showAlert
布尔状态值并将其设置为 {{1 }} 当你想显示警报时。然后,只需有条件地在返回的 JSX 中呈现警报内容。请参阅下面的示例,了解这可能如何运作。
true
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。