在地圖功能中反應一個項目的切換類（但是當另一個將被放置時，將其從另一個中刪除）

Question

事實證明，日歷的過濾器是通過地圖完成的，共有7個對象是如何制作的，因此，在選擇假期時，只有假期使該類處於活動狀態，而當您單擊另一個過濾器時，另一個對象將變為活動狀態，而其他人則失去了資產類別？ 有什么例子嗎？ 我總是一次激活所有功能，然后只有第一個點擊（

   {
_.map(this.firstRowEventTypes(), (item, key) =>
    <button className="event-type-item" onClick={() => this.filterEvents(item.color)} key={key}>
    <div className="event-type-circle" style={{backgroundColor: item.color}}/>
    <div onClick={ () => this.setState({active: this.state.active === item.color ? null : item.color}) }
className={classnames("event-type-name", this.state.active === item.color && 'calendar-filter-active')}>{item.name}</div>
</button>
    )  
}  

filterEvents(color) {
    const events = [];

    this.state.allEvents.map((val) => {
        if (val.color === color) {
            events.push(val);
        }
    });

    this.setState({...this.state, events});
}
firstRowEventTypes() {
        return [
            {color: '#108aeb', name: 'Заседания', id: '1'},
            {color: '#4caf50', name: 'Обучение', id: '2'},
            {color: '#87cefa', name: 'Праздники', id: '3'},
            {color: '#ff5252', name: 'Корпоративы', id: '4'},
            {color: '#ab47bc', name: 'Спорт', id: '5'},
            {color: '#e91e63', name: 'Культура', id: '6'},
            //color: '#8d6e63', name: 'Другое'},
            {color: '#d1d1d6', name: 'Другое', id: '7'},
            //{color: '#108AEB', name: 'Корпоративный'},
            //{color: '#87cefa', name: 'Гос. праздники'},
            //{color: '#e91e63', name: 'Корп. мероприятия'},
            //{color: '#8d6e63', name: 'Корп. развитие'},
            //{color: '#ffa726', name: 'Спортивный'},
        ];
    }

這是地圖上的項目，當我按下按鈕時，所有項目都切換新類（當我按下按鈕時，如何為一個項目切換活動類，然后從另一個項目中刪除？

Answer 1

您可以將數組索引key或item.id設置為活動按鈕

{
    _.map(this.firstRowEventTypes(), (item, key) =>
        <button className="event-type-item" onClick={() => this.filterEvents(item.color)} key={key}>
            <div className="event-type-circle" style={{backgroundColor: item.color}}/>

            <div onClick={ () => this.setState({active: item.id}) }
                 className={classnames("event-type-name", this.state.active === item.id && 'calendar-filter-active')}>{item.name}</div>
        </button>
    )
}