问使用JavaScript在React中过滤图像

EN

export default class Product1 extends React.Component {
  render() {
    return (
       <div className="product-box filterDiv shoes">
          <h2>Shoes 1</h2>
          <img className="product-image" src={product1} alt="" />
          <h5>$23.99</h5>
       </div>
    )
  }
}

export default class Shop extends React.Component {
   render() {
      return (
         <div id="myBtnContainer">
             <button className="bttn active" onClick="filterSelection('all')">
            Show All
          </button>
          <button className="bttn" onClick="filterSelection('shoes')">
            Shoes
          </button>
          <button className="bttn" onClick="filterSelection('shirts')">
            Shirts
          </button>
          <button className="bttn" onClick="filterSelection('socks')">
            Socks
          </button>
          <button className="bttn" onClick="filterSelection('hats')">
            Hats
          </button>
        </div>

        <div className ="container">
            <Product1 />
            <Product2 />
            <Product3 />
        </div>
    )
  }
}

filterSelection("all");
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c === "all") c = "";
  // add the "show" class (display:block) to the filtered elements
  // and remove the "show" class from the elements that are not selected
  for (i = 0; i < x.length; i++) {
    RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) AddClass(x[i], "show");
  }
}

// show filtered elements
function AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) === -1) {
      element.className += " " + arr2[i];
    }
  }
}

// hide elements that are not selected
function RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}

// add active class to the current control button and highlight it
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("bttn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function () {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}