分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了从 div 列表中选择一个 div 并在该 div reactjs 功能组件上切换类，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决从 div 列表中选择一个 div 并在该 div reactjs 功能组件上切换类？

开发过程中遇到从 div 列表中选择一个 div 并在该 div reactjs 功能组件上切换类的问题如何解决？下面主要结合日常开发的经验，给出你关于从 div 列表中选择一个 div 并在该 div reactjs 功能组件上切换类的解决方法建议，希望对你解决从 div 列表中选择一个 div 并在该 div reactjs 功能组件上切换类有所启发或帮助；

我在 react 中有一个 功能组件，它接收一个带有数值的数组。

对于每个值，我构建一个 div 并将它们并排放置在 flexBox 中。

当我点击一个 div 时，我必须通过添加或删除类 SELEction-bar-SELEcted 来选择它，它只会改变放置在 div 底部的条形的颜色。

我所做的工作有效，但它选择了所有 div，如何让它只选择我点击的 div？

这是我的代码，提前感谢您的回答。

const [SELEcted,setSELEcted] = useState(false);

const SELEzionaTab = () =>{
    SELEcted ? setSELEcted(false) : setSELEcted(true);
}


return (
    <div classname="months-tab">
        
        {props.data.map((v,k) => 
            <div classname="single" key={k} ID={"tab-"+k} onClick={SELEzionaTab}>
                <div classname="single-header">
                    <p classname="mese">{k}</p>
                </div>
                <div classname="single-body">
                    <div classname="value">
                        <p classname="numero-spese">{v.doc} doc.</p>
                        <p classname="importo">{v.val}</p>
                    </div>  
                    <div classname={SELEcted ? "SELEction-bar SELEction-bar-SELEcted" : "SELEction-bar"}>
                </div>                  
                </div>
            </div>
        )}
       
    </div>
)

解决方法

您存储的选定状态可以是元素的 id 或索引。然后，当您遍历列表时，您只会在 id 或索引与当前选择的匹配时更改类。

现在您只是建议选择了某项内容，但 true/false 不会告诉您列表中的哪一项。

否则你就非常接近了。

您需要区分在 SELEcted 状态下选择了哪个选项卡，因此例如您可以将其值从 Boolean 更改为 number 或 String保存当前选定选项卡的索引或名称或 ID，因此：

const [SELEcted,setSELEcted] = useState({});

// This is really `ToggleTab` rather than `SELEzionaTab`
const SELEzionaTab = (tabId = null) => {
    setSELEcted({ ...SELEcted,[tabId]: !SELEcted[tabId] })
}

// in the component
onClick={() => SELEzionaTab(k)}

// and the SELEcted class becomes:
<div className={SELEcted[k] ? "SELEction-bar SELEction-bar-SELEcted" : "SELEction-bar"}>