0

Получается фильтр для календаря делаю через map и там 7 обьектов как сделать что бы при выборе там праздничных дат только праздничные получали класс active и при нажатии на другой фильтр другой обьект становился активный а все остальные теряли класс актив? есть ли пример какой? у меня вечно то все сразу активные то только первый клик(

{
_.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: 'Спортивный'},
        ];
    }

1 ответ 1

0

Не нужно ничего фильтровать в state, проще при рендере массив отфильтровать и всё.

class App extends React.Component {

  constructor() {
    super();

    this.state = {
      events: [],
      filters: [],
      activeFilter: '1'
    };

    this.getEvents = this.getEvents.bind(this);
    this.getCategories = this.getCategories.bind(this);
    this.selectFilter = this.selectFilter.bind(this);
  }

  componentDidMount() {
    this.getCategories();
    this.getEvents();
  }

  getCategories() {
    const fetchedCategories = [
      {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: '#d1d1d6', name: 'Другое', id: '7'}
    ];
    this.setState({
      filters: fetchedCategories
    })
  }

  getEvents() {
    const fetchedEvents = [
      {categoryId: "2", name: "Something should happen"},
      {categoryId: "3", name: "Something should happen"},
      {categoryId: "2", name: "Something should happen"},
      {categoryId: "5", name: "Something should happen"},
      {categoryId: "5", name: "Something should happen"},
      {categoryId: "2", name: "Something should happen"},
      {categoryId: "1", name: "Something should happen"},
      {categoryId: "3", name: "Something should happen"},
      {categoryId: "3", name: "Something should happen"},
      {categoryId: "3", name: "Something should happen"},
      {categoryId: "4", name: "Something should happen"},
      {categoryId: "4", name: "Something should happen"},
      {categoryId: "6", name: "Something should happen"}
    ];
    this.setState({
      events: fetchedEvents
    })
  }

  selectFilter(id) {
    this.setState({
      activeFilter: id
    })
  }

  render() {
    const { filters, events, activeFilter } = this.state;

    return (
      <div>
        <div className="filters">
          {filters && filters.map((filter, i) => (
            <button
              key={`filter-${i}`}
              className="event-type-item"
              onClick={() => this.selectFilter(filter.id)}
            >
              <div
                className="event-type-circle"
                style={{backgroundColor: filter.color}}
              ></div>
              <div
                className={`event-type-name ${activeFilter === filter.id && 'calendar-filter-active'}`}
                // className={classnames(
                //   "event-type-name", {
                //     'calendar-filter-active': active === item.color
                //   })}
              >
                {filter.name}
              </div>
            </button>
          ))}
        </div>
        <div className="events">
          {events && events.filter(event => event.categoryId === activeFilter).map((event, i) => <div key={`event-${i}`} className="event">{event.name} - {event.categoryId}</div>)}
        </div>
      </div>
    )
  }
};

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>


<div id="root"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.