javascript - ReactJS onclick 向另一个元素添加或删除类
问题描述
我正在努力将我的普通 jQuery 代码转换为 React JS(我是 React 的新手)。
我有以下代码:
$(".add").click(function () {
$("nav").addClass("show");
});
$(".remove").click(function () {
$("nav").removeClass("show");
});
$(".toggle").click(function () {
$("nav").toggleClass("show");
});
nav {
width: 250px;
height: 150px;
background: #eee;
padding: 15px;
margin-top: 15px;
}
nav.show {
background: red;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button class="add">Add</button>
<button class="remove">Remove</button>
<button class="toggle">Toggle</button>
<nav>Navigation menu</nav>
尝试过的引用似乎只为同一元素添加/删除类:
https://stackoverflow.com/a/42630743/6191987
那么,如何将相同的 jQuery 方法转换或创建为 ReactJS?
解决方案
- 使用跟踪是否显示导航的状态。
- 在反应代码中使用与状态相对应的类名。
- React 使用“className”而不是“class”,因为“class”已经是 javascript 中的保留字。
您可以检查此沙盒链接以进行实施
function App() {
const [show, setShow] = React.useState();
return (
<div className="App">
<button className="add" onClick={() => setShow(true)}>
Add
</button>
<button className="remove" onClick={() => setShow(false)}>
Remove
</button>
<button className="toggle" onClick={() => setShow(!show)}>
Toggle
</button>
<nav className={show ? "show" : ""}>Navigation menu</nav>
</div>
);
}
推荐阅读
- migration - 从 .NET Core 3.1 迁移到 .NET 5 会产生编译时错误
- html - Bootsrap 表在行中断字
- python - 如何比较斜率线性回归
- python - pytest 没有 django “lazy_django.py 没有 Django 设置”
- headless - 如何在 Selenium c# 中为 Headless Browser 处理打印对话框?
- python - 根据字符串 Python 上的字符查找矩阵上的位置并检索该位置的值
- javascript - 如何根据 id 更新对象
- javascript - 如何通过jquery将excel的属性添加到样式标签?
- java - 序列化是否需要原生机制?
- android - LocalBroadcastManager 的任何替代方案,例如 LiveData?