React如何觸發onClick從地圖功能

Question

我有一些被映射的列表，當我單擊一個元素（它是數組中的對象之一）時，我想觸發onClick。

假設有3個列表，當我單擊其中的一個列表時，我想將“我單擊的元素”的類從“關閉”更改為“打開”。

state= {
    open: false
}

handleClick = () => {
    this.setState({
        open: !this.state.open
    })
}

Array.map((list, index) => {
    <div key={index} onClick={this.handleClick}>
        <p className={this.state.open? 'open' : 'close'}>{list.title}</p>
    </div>
})

。

Array = [{
    title: 'a',
    link: '/service/wallet'
},{
    title: 'b',
    link: '/service/home'
}]

我有this.props.location.pathname的值，我想可以將其與Array[i].link this.props.location.pathname進行比較。

這樣的東西？

if(this.props.location.pathname === Array[0].link){

}

但是，我不知道如何完成此問題的代碼。 請告訴我我的想法是否正確以及一些提示。

Answer 1

您需要保留“點擊了嗎？” 在this.state信息。 因為這是您需要跟蹤的事情列表 ，因此無法將狀態存儲在單個變量中，因此需要它們的映射。

state= {
    open: {}
}

handleClick = (link) => {
    let linkOpenState = false;
    if (this.state.open.hasOwnProperty(link)) {
        linkOpenState = this.state.open[link];
    }

    this.setState({ open: { [link]: linkOpenState } })
}

Array.map((list, index) => {
    <div key={index} onClick={this.handleClick.bind(this, list.link)}>
        <p className={this.state.open[list.link]? 'open' : 'close'}>{list.title}</p>
    </div>
})

您需要習慣於思考“反應方式”。 狀態需要保持在組件狀態（或者如果復雜性成為問題，請查看Redux）。 您不必強制性地操作DOM，也不必“詢問” DOM以獲取信息，而是根據狀態告訴它外觀。

Answer 2

請看一下此代碼與react元素的映射數據

為了解決此問題，您可以使用一種狀態來跟蹤一組元素的交互，在這種情況下，它是元素列表。 在這里，您可以在狀態變量中使用地圖，並與每個元素相關聯的{key，value}對進行跟蹤。 希望這可以幫助。 謝謝。