我的开发环境:一米零一米,一米零一米,一米二米,一米三米。
当我单击分类为选项卡的每个字段的技术堆栈时,我希望仅在单击CSS并将其包含在所选标记中时才更改CSS。
const [selectedTags, setSelectedTags] = useRecoilState(selectedTagsState);
const tabContArr = [
{
tabTitle: 'FE',
tabCont: ['JavaScript', 'TypeScript', 'React', 'Vue', 'Svelte', 'Nextjs'],
},
{
tabTitle: 'BE',
tabCont: [
'Java',
'Spring',
'Nodejs',
'Nextjs',
'Go',
'Kotlin',
'Express',
'MySQL',
'MongoDB',
'Python',
'Django',
'php',
'GraphQL',
'Firebase',
],
},
{
tabTitle: 'etc',
tabCont: [],
},
];
const onTagClick = (e) => {
const newSelectedTags = [...selectedTags];
const filterTarget = newSelectedTags.filter(
(el) => el.tagName === e.target.textContent,
);
if (filterTarget.length === 0 && newSelectedTags.length < 5) {
let tagObj = {};
tagObj.tagName = e.target.textContent;
newSelectedTags.push(tagObj);
setSelectedTags(newSelectedTags);
} else if (
filterTarget.length !== 0 ||
selectedTags.length >= 5
) {
{
(''); // nothing change
}
}
};
// FE, BE Choose
tabContArr[activeIdx].tabCont.map((skillTag, idx) => {
return (
<div
key={idx}
className={
// HERE!!!
selectedTags.includes(skillTag)
? 'skill-tag skill-selected-tag'
: 'skill-tag'
}
onClick={onTagClick}
aria-hidden="true"
>
{skillTag}
</div>
);
})
我试着写代码像一个标记为“这里!!!”,但它不工作,当我这样做。请帮助我如何改变CSS(类)只为名称在选定的标签!!
className={
// HERE!!!
selectedTags.includes(skillTag)
? 'skill-tag skill-selected-tag'
: 'skill-tag'
}
1条答案
按热度按时间3htmauhk1#
在
tabContArr[activeIdx].tabCont.map((skillTag, idx) => {
中,skillTag
是一个字符串,而selectedTags
是一个对象数组,如下所示:[{tagName: 'Java'}, {tagName: 'Spring'}, ...]
。您正在确定对象数组是否包含字符串,而字符串永远不会出现。console.log(selectedTags, skillTag)
将使它更容易理解。