重新显示我的画廊页面会破坏排序和过滤功能

Question

我目前正在第一个网站上工作。我主要是想通过反应来做到这一点，但对于一般的编程我还是很陌生，对某些（通常是很基本的）概念的理解有时是缺乏的。我正在努力解决这个问题。 着手解决实际问题。我建立了一个单页应用程序，其中包含图片库。该画廊具有排序功能和过滤功能，除非您重新渲染页面（例如，当您切换到主页然后又回到图片库时），否则该画廊将起作用。如果画廊被重新渲染，则“筛选”和“排序”按钮将中断，无法再单击。 对于这个问题，我的解决方案是每次切换回图库时都添加一个自动页面刷新功能，但这绝对不能解决问题。

我尝试将componentDidMount()和componentDidUpdate()函数添加到代码中，但是我还没有解决问题。我认为这不是解决此问题的正确方法。我的猜测是，一旦反应卸载它们，事件监听器就不会被添加到按钮中，我不确定如何解决此问题。有人告诉我使用React的onClick处理程序来处理按钮，而使用onChange来处理单选按钮，但是我真的不确定如何更改代码来完成这项工作。

感谢您对我的问题的任何反馈和帮助！

Homebasescript.js

import Shuffle from 'shufflejs';

class Demo {
  constructor(element) {
    this.element = element;
    this.shuffle = new Shuffle(element, {
      itemSelector: '.picture-item',
      sizer: element.querySelector('.my-sizer-element'),
    });

    // Log events.
    this.addShuffleEventListeners();
    this._activeFilters = [];
    this.addFilterButtons();
    this.addSorting();
    this.addSearchFilter();
  }

  /**
   * Shuffle uses the CustomEvent constructor to dispatch events. You can listen
   * for them like you normally would (with jQuery for example).
   */
  addShuffleEventListeners() {
    this.shuffle.on(Shuffle.EventType.LAYOUT, (data) => {
      console.log('layout. data:', data);
    });
    this.shuffle.on(Shuffle.EventType.REMOVED, (data) => {
      console.log('removed. data:', data);
    });
  }

  addFilterButtons() {
    const options = document.querySelector('.filter-options');
    if (!options) {
      return;
    }

    const filterButtons = Array.from(options.children);
    const onClick = this._handleFilterClick.bind(this);
    filterButtons.forEach((button) => {
      button.addEventListener('click', onClick, false);
    });
  }

  _handleFilterClick(evt) {
    const btn = evt.currentTarget;
    const isActive = btn.classList.contains('active');
    const btnGroup = btn.getAttribute('data-group');

    this._removeActiveClassFromChildren(btn.parentNode);

    let filterGroup;
    if (isActive) {
      btn.classList.remove('active');
      filterGroup = Shuffle.ALL_ITEMS;
    } else {
      btn.classList.add('active');
      filterGroup = btnGroup;
    }

    this.shuffle.filter(filterGroup);
  }

  _removeActiveClassFromChildren(parent) {
    const { children } = parent;
    for (let i = children.length - 1; i >= 0; i--) {
      children[i].classList.remove('active');
    }
  }

  addSorting() {
    const buttonGroup = document.querySelector('.sort-options');
    if (!buttonGroup) {
      return;
    }
    buttonGroup.addEventListener('change', this._handleSortChange.bind(this));
  }

  _handleSortChange(evt) {
    // Add and remove `active` class from buttons.
    const buttons = Array.from(evt.currentTarget.children);
    buttons.forEach((button) => {
      if (button.querySelector('input').value === evt.target.value) {
        button.classList.add('active');
      } else {
        button.classList.remove('active');
      }
    });

    // Create the sort options to give to Shuffle.
    const { value } = evt.target;
    let options = {};

    function sortByDate(element) {
      return element.getAttribute('data-date-created');
    }

    function sortByTitle(element) {
      return element.getAttribute('data-title').toLowerCase();
    }

    if (value === 'date-created') {
      options = {
        reverse: true,
        by: sortByDate,
      };
    } else if (value === 'title') {
      options = {
        by: sortByTitle,
      };
    }
    this.shuffle.sort(options);
  }

  // Advanced filtering
  addSearchFilter() {
    const searchInput = document.querySelector('.js-shuffle-search');
    if (!searchInput) {
      return;
    }
    searchInput.addEventListener('keyup', this._handleSearchKeyup.bind(this));
  }

  /**
   * Filter the shuffle instance by items with a title that matches the search input.
   * @param {Event} evt Event object.
   */
  _handleSearchKeyup(evt) {
    const searchText = evt.target.value.toLowerCase();
    this.shuffle.filter((element, shuffle) => {
      // If there is a current filter applied, ignore elements that don't match it.
      if (shuffle.group !== Shuffle.ALL_ITEMS) {
        // Get the item's groups.
        const groups = JSON.parse(element.getAttribute('data-groups'));
        const isElementInCurrentGroup = groups.indexOf(shuffle.group) !== -1;
        // Only search elements in the current group
        if (!isElementInCurrentGroup) {
          return false;
        }
      }
      const titleElement = element.querySelector('.picture-item__title');
      const titleText = titleElement.textContent.toLowerCase().trim();
      return titleText.indexOf(searchText) !== -1;
    });
  }
}

export default Demo;

Homebase.js

import React, { Component } from 'react';
import Shuffle from 'shufflejs';
import './Homebase.scss';
import Demo from './Homebasescript.js';


class homebase extends Component {

  componentDidMount () {
    document.addEventListener('DOMContentLoaded', () => {
      window.demo = new Demo(document.getElementById('grid'));
    });
  }

  render() {
    return (

      <section className="about-page">

      <div className="container-about">
        <div className="row-about">
          <div className="col-12@sm">
            <h1 className="about-title">Home Base Designs</h1>
          </div>
        </div>
      </div>

      <div className="container-about">
        <div className="row-about">
          <div className="col-4@sm col-3@md">
            <div className="filters-group filters-group-left">
              <label htmlFor="filters-search-input" className="filter-label filter-color">Search</label>
              <input className="textfield filter__search js-shuffle-search" type="search" id="filters-search-input" />
            </div>
          </div>
        </div>

        <div className="row-about">
          <div className="col-12@sm filters-group-wrap">
            <div className="filters-group filters-group-right">
              <p className="filter-label filter-color">Filter</p>
              <div className="btn-group filter-options">
                <button className="btn btn--primary" data-group="war">War</button>
                <button className="btn btn--primary" data-group="trophy">Trophy</button>
                <button className="btn btn--primary" data-group="farm">Farm</button>
                <button className="btn btn--primary" data-group="fun">Fun</button>
              </div>
            </div>
            <fieldset className="filters-group">
              <legend className="filter-label filter-color">Sort</legend>
              <div className="btn-group sort-options">
                <label className="btn active">
                  <input type="radio" name="sort-value" value="dom" defaultChecked /> Default </label>
                <label className="btn">
                  <input type="radio" name="sort-value" value="title" /> Title </label>
                <label className="btn">
                  <input type="radio" name="sort-value" value="date-created" /> Date Created </label>
              </div>
            </fieldset>
          </div>
        </div>
      </div>
</section>

    );
  };
};

export default homebase;