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 塊相反。