Javascript CSS类仅应用于一个元素

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

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

解压缩数组并分配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} />
                )
            }
        }
    }

---

谢谢

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

据我所知，toggle完全基于CSS，只受元素本身的影响。尽管如此，我还是尝试在if-else情况下切换到classList.add和classList.remove，但输出没有变化。无论如何谢谢你

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