Не удалось добавить активный класс в React.js - PullRequest
Новая
       7

Не удалось добавить активный класс в React.js

0 голосов
/ 11 февраля 2019

Я пытаюсь добавить активный класс только для события щелчка, но он добавляет во все события. У меня есть три текста, каждый из которых должен иметь активный класс при нажатии. Пожалуйста, посмотрите, что не так в моем коде ниже, 

  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>

Ответы [ 5 ]

0 голосов
/ 11 февраля 2019

Вместо использования трех разных переменных используйте одну и предоставьте им значения в соответствии с именами, которые имеют смысл.

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>
0 голосов
/ 11 февраля 2019

Вы используете один и тот же элемент состояния для всех трех ссылок, поэтому все они включаются / выключаются одновременно.

Либо используйте разные элементы состояния для каждого, либо создайте свой элемент состоянияудерживать различное значение в зависимости от того, какая ссылка активна.

Поскольку не две ссылки могут быть активными одновременно, я бы выбрал второй вариант использования разных значений.

Что-то вроде 

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>
    );
  }
0 голосов
/ 11 февраля 2019

Используйте три разные переменные.

 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>
0 голосов
/ 11 февраля 2019 
 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>
0 голосов
/ 11 февраля 2019

Это происходит потому, что ваши три метода comingSoon, boxOffice и newRelease изменяют одну и ту же переменную в вашем состоянии.Вы должны создать одну переменную для каждого h5, чтобы вы могли обрабатывать их активацию изолированно.

Другое решение - создать другой компонент, который визуализирует ваш элемент h5, и импортировать его в этот.

...