CSS class 仅适用于一个元件

Question

我有一些代码可以解包一个数组并返回一个 JSX 元素数组。 这很好用，但是，当单击一个元素时，“selectedEl”css class 将从所有其他元素中删除。

我很确定我刚刚犯了一些愚蠢的错误，但我似乎无法弄清楚。 谢谢

解包数组并分配 onClick 方法的代码：

function UnpackReccArray() {
        const renderArray = []
        for (let renderEl = 0; renderEl < self.state.capMethod; renderEl++) {
            renderArray.push(
                <span className="topicElement" onClick={self.pushToChosen.bind(this, self.state.reccDataQuery[renderEl].topicID, renderEl + "topicEl")} id={renderEl + "topicEl"}>
                    <p className="fontLibre">{self.state.reccDataQuery[renderEl].displayName}</p>
                </span>
            )
            if (renderEl + 1 === self.state.capMethod) {
                return (
                    <self.ResultRender title="Popular Subjects" renderContent={renderArray} />
                )
            }
        }
    }

处理 onClick function 的代码

pushToChosen = (id, elID) => {
    const self = this
    const localChoseArray = this.state.subjectChosenArray
    const index = localChoseArray.indexOf(id.toString())
    if (index > -1) {
        localChoseArray.splice(index, 1);
        self.setState({
            subjectChosenArray: localChoseArray
        }, () => {
            document.getElementById(elID).classList.remove("selectedEl")
        })
    } else {
        self.setState({
            subjectChosenArray: [...this.state.subjectChosenArray, id.toString()]
        }, () => {
            document.getElementById(elID).classList.add("selectedEl")
        })
    }
    document.getElementById(elID).classList.toggle("selectedEl")
}

运行代码的 GIF

谢谢！

Answer 1

我没有完全理解代码，但似乎切换是导致问题的原因，因为 if 和 else 处理所有可能的情况，切换可能会与 if else 块相反。