Question

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

  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>

Answer 1

使用三个不同的变量。

 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>

Answer 2

发生这种情况是因为您的三个方法variables，comingSoon和boxOffice在您的状态下正在更改相同的变量。您应该为每个newRelease创建一个变量，以便您可以独立处理它们的激活。

另一种解决方案是创建另一个呈现h5元素的组件，并将其导入到该组件中。

Answer 3

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

Answer 4

您对所有三个链接使用的状态项相同，因此它们都可以同时打开/关闭。

要么为每个状态项使用不同的状态项，要么根据活动的链接使状态项具有不同的值。

因为不能同时激活两个链接，所以我将使用第二种选择，即使用不同的值。

类似

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

Answer 5

不是使用三个不同的变量，而是使用一个变量，并根据有意义的名称为它们提供值。

class CategoryList extends React.Component {
          state = {
            productlist: [],
            isActive: 'COMING_SOON'

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

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

5 个答案: