基於ID的隱藏元素onClick React

Question

我有一個3個過濾器的列表，它將顯示基於它們的id，單擊時它將顯示與id匹配的過濾器，但如果再次單擊它，我想隱藏它。因此，如果過濾器1單擊它應該顯示，然後如果再點擊它應該隱藏

https://www.webpackbin.com/bins/-KpFE0uZN94N_RY2lavn

import React, { Component } from 'react' 

export default class Catalogue extends Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     filterListShow: false, 
     active: false 
    } 
    this.handleShowFilterList = this.handleShowFilterList.bind(this) 
    } 

    // Show Filter checklist onClick 
    handleShowFilterList(id) { 
    this.setState({ 
     filterListShow: id, 
     active: false }) 
    } 


    render() { 

    const { filterListShow } = this.state 

    let test = '' 
    if (filterListShow === 1) { 
     test = (<div>show 1</div>) 
    } 
    else if (filterListShow === 2) { 
     test = (<div>show 2{console.log(2)}</div>) 
    } 
    else if (filterListShow === 3) { 
     test = (<div>show 3{console.log(3)}</div>) 
    } 

    return (
     <div > 
     <div onClick={()=> this.handleShowFilterList(1)}> 
     Show Filter 1 
     </div> 
     <div onClick={()=> this.handleShowFilterList(2)}> 
     Show Filter 2 
     </div> 
     <div onClick={()=> this.handleShowFilterList(3)}> 
     Show Filter 3 
     </div> 
     {test} 
     </div> 
    ) 
    } 
} 

Answer 1

只需添加另一張支票在onClick處理程序來檢查當前狀態是否相同的ID的元件點擊時，

// Show Filter checklist onClick 
    handleShowFilterList(id) { 
    if(this.state.filterListShow !== id) { 
     this.setState({ 
     filterListShow: id, 
     active: false }) 
    } else { 
     this.setState({filterListShow: false}) 
    } 
    } 

DEMO

Answer 2

只需將條件置於handleShowFilterList函數中，如果再次點擊了相同的項目，則重置filterListShow變量的狀態值。

像這樣：

handleShowFilterList(id) { 
    this.setState(prevState => ({ 
     //if same then reset otherwise assign new id 
     filterListShow: prevState.filterListShow == id ? false : id,  
     active: false 
    })) 
} 

Working Code.