use-state - 在同一个 div 容器中获取两个不同的 ref
问题描述
我是编码和反应的新手,并且仍在学习反应中的思考。
我想要多个容器,单击一个,单击的 div 元素的字体颜色会发生变化,它会打开它下面的 div。并随后在单击时将其反转。
import React, {useRef, useState} from "react";
import "./style.css";
export default function App() {
const [clicked, setClicked] = useState(false);
const Ref1 = useRef();
const RefShow = useRef()
const Namee = (ref) => {
if (!clicked) {
ref.current.style.color = "green";
RefShow.current.style.display ="block";
setClicked(true)
} else {
ref.current.style.color = "black";
RefShow.current.style.display ="none";
setClicked(false)
}
}
return (
<div id = "MainContainer">
<div className ="container">
<div ref={Ref1} onClick={() => Namee(Ref1)} className="icon-wrapper">
Click here to show red
</div>
<div ref ={RefShow} className ="Showred"> <p>hedy </p></div>
</div>
</div>
);
}
https://stackblitz.com/edit/react-cklj4x?file=src%2FApp.js << 这是要查看的。
我怎样才能自动获取 RefShow 元素而无需键入它,因为我计划添加更多这些容器,完全相同。
任何提示或批评表示赞赏,因为我想尽可能多地学习。几个月前我还没有听说过 react 也没有开发知识,所以我想从那以后我学到了很多东西。
解决方案
推荐阅读
- facebook-graph-api - Instagram Graph API 和应用程序审批流程
- java - 使用单选按钮输入公式
- if-statement - VLOOK-up 没有 N/A 和 0 个结果(从 2 张纸中提取)
- reactjs - 将按钮宽度设置为父级的“全宽”
- java - 从 textView 中提取部分文本并使该文本可点击?
- javascript - Rails - 复选框不会改变值
- r - R中的先验算法
- javascript - 是否可以通过引用传递或访问实际对象?
- angular - 带有自定义管道的Angular 7键值管道以过滤掉值的数据
- python - 如何从geoJSON文件中计算几个MultiPolygons的面积?