React - 如何按索引更改类名？答案

【问题标题】：React - How to change className by index?React - 如何按索引更改类名？
【发布时间】：2021-03-02 22:22:01
【问题描述】：

我创建了一个简单的逻辑：当你点击某个块时，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>
    );
};

【问题讨论】：

标签： javascript arrays reactjs react-props

【解决方案1】：

你可以记住选中的索引

请参考以下代码：

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>
    );
};

【讨论】：