时间戳

首页 > 解决方案 > 无法在 React.js 中添加活动类

reactjs - 无法在 React.js 中添加活动类

问题描述

我正在尝试仅在单击事件上添加一个活动类，但它正在添加所有事件我有三个文本，每个文本在单击时都应该具有活动类，请查看我下面的代码中有什么问题，

  class CategoryList extends React.Component {
  state = {
    productlist: [],
    isActive: false
  };
  comingSoon(e) {
    this.setState(activate => {
     return { productlist: data.comingsoon, isActive: !activate.isActive               };
    });
  }
  boxOffice(e) {
    this.setState(activate => {
      return { productlist: data.boxoffice, isActive: !activate.isActive };
    });
  }
  newRelease(e) {
    this.setState(activate => {
       return { productlist: data.newrelease, isActive:   !activate.isActive };
    });
  }
  render() {
    return (
      <div className="categoryList-container">
        <div className="categoryList-text-wrapper">
          <h5
            className={this.state.isActive ? "active" : ""}
            onClick={() => this.comingSoon(this)}
          >
            COMING SOON
          </h5>
          <h5
            className={this.state.isActive ? "active" : ""}
            onClick={() => this.boxOffice(this)}
          >
            BOX OFFICE
          </h5>
          <h5
            className={this.state.isActive ? "active" : ""}
            onClick={() => this.newRelease(this)}
          >
            NEW RELEASE
          </h5>
        </div>

标签： reactjstoggle

解决方案

使用三个不同的变量。

 class CategoryList extends React.Component {
      state = {
        productlist: [],
        isActiveComing: false,
        isActiveBox: false,
        isActiveNew: false

      };
      comingSoon(e) {
        this.setState(activate => {
         return { productlist: data.comingsoon, isActiveComing: !activate.isActiveComing               };
        });
      }
      boxOffice(e) {
        this.setState(activate => {
          return { productlist: data.boxoffice, isActiveBox: !activate.isActiveBox};
        });
      }
      newRelease(e) {
        this.setState(activate => {
           return { productlist: data.newrelease, isActiveNew:   !activate.isActiveNew};
        });
      }
      render() {
        return (
          <div className="categoryList-container">
            <div className="categoryList-text-wrapper">
              <h5
                className={this.state.isActiveComing? "active" : ""}
                onClick={() => this.comingSoon(this)}
              >
                COMING SOON
              </h5>
              <h5
                className={this.state.isActiveBox ? "active" : ""}
                onClick={() => this.boxOffice(this)}
              >
                BOX OFFICE
              </h5>
              <h5
                className={this.state.isActiveNew ? "active" : ""}
                onClick={() => this.newRelease(this)}
              >
                NEW RELEASE
              </h5>
            </div>

推荐阅读