javascript - React - 如何按索引更改类名?
问题描述
我创建了一个简单的逻辑:当你点击某个块时,会classname
发生变化,但问题是当你点击某个块时,classname
变化和其余块看起来像这样
我只需要更改我单击的类的名称,我想我需要使用索引,但我不太明白如何重新处理它
export default function SelectGradientTheme(props) {
const resultsRender = [];
const [borderColor, setBorderColor] = useState(false);
const setBorder = () => {
setBorderColor(!borderColor)
}
const borderColorClassName = borderColor ? "selectBorder" : null;
for (var i = 0; i < GradientThemes.length; i += 3) {
resultsRender.push(
<div className={"SelectThemePictures_Separator"}>
{
GradientThemes.slice(i, i + 3).map((col, index) => {
return (
<div key={index} className={borderColorClassName} onClick={() => props.SideBarPageContent(col)|| setBorder()}>
</div>
);
})
}
</div>
)
}
return (
<div className="SelectThemeWrapper">
{resultsRender}
</div>
);
};
解决方案
您可以记住所选索引
请参考以下代码:
export default function SelectGradientTheme(props) {
const resultsRender = [];
const [selectedIndex, setSelectedIndex] = useState(false);
const setBorder = (index) => {
setSelectedIndex(index);
};
for (var i = 0; i < GradientThemes.length; i += 3) {
resultsRender.push(
<div className={"SelectThemePictures_Separator"}>
{
GradientThemes.slice(i, i + 3).map((col, index) => {
return (
<div key={index}
className={index === selectedIndex ? 'selectBorder' : null}
onClick={() => props.SideBarPageContent(col)|| setBorder(index)}>
</div>
);
})
}
</div>
)
}
return (
<div className="SelectThemeWrapper">
{resultsRender}
</div>
);
};
推荐阅读
- javascript - 单击时水平滚动 div 元素
- python - 将 Django Web 界面与 Python 连接起来
- erlang - Erlang:如何断言匹配 IoDevice 值?
- c# - 无法确定导航属性 Entity Framework Core 表示的关系
- java - 我只想从 firebase 中删除收藏夹
- excel - Excel宏:在命名行之间,如果另一个单元格=“c”,则单元格等于零
- clojure - 将文件行的惰性序列传递给函数
- r - 来自成对比较 p 值的紧凑型字母显示 (CLD)
- javascript - 循环遍历动态对象:signalData[signals].data 不是函数
- postgresql - 如何将标准格式时区转换为 tz 数据库时间格式?