Класс не меняется на свитке в реакции - PullRequest
Новая
       41

Класс не меняется на свитке в реакции

1 голос
/ 14 июня 2019

Ниже приведена моя функция handleScroll, в которой я пытаюсь добавить класс red, если он прокручивается до определенного предела, в противном случае применяется blue.Однако это происходит только внутри оператора else, а также console.log(e.target.scrollTop); его утешает как undefined.Дайте мне знать, что я делаю здесь не так.

Код - 

handleScroll(e) {
    console.log(e.target.scrollTop);
    if (window.screenX > 100) {
      this.setState({
        navBckgroundColor: `red`
      });
    } else {
      this.setState({
        navBckgroundColor: `blue`
      });
    }
  }

Codesandbox - https://codesandbox.io/s/silly-feynman-m6hp1

Ответы [ 3 ]

2 голосов
/ 14 июня 2019

Я настоятельно рекомендую добавить дополнительную проверку вашего состояния.При прокрутке по одному разу состояние компонента обновляется несколько раз после определенного диапазона (100), что не является необходимым.Вам нужно обновить его только один раз.

Обновление будет продолжаться, потому что вы соответствуете условиям внутри handleScroll, даже если фон уже изменился.Огромное количество обновлений может привести к сбою вашего приложения.

Попробуйте что-то вроде этого, оно обновит ваше состояние компонента, как ожидается, и только при необходимости: https://codesandbox.io/s/white-architecture-jepyc

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      navBckgroundColor: `blue`,
      altered: false
    };
  }
  componentDidMount() {
    window.addEventListener("scroll", this.handleScroll);
  }

  //use arrow function instead so that its "this" keyword points to the component's execution context. Otherwise, "this" will point to the global window object where you cannot use this.setState.
  handleScroll = e => {
    if (window.pageYOffset > 100 && !this.state.altered) {
      this.setState({
        navBckgroundColor: `red`,
        altered: true
      });
    } else if(window.pageYOffset < 100 && this.state.altered) {
      this.setState({
        navBckgroundColor: `blue`,
        altered: false
      });
    }
  };

  render() {
    return (
      <div className="App">
        <Navbar bckGroundColor={this.state.navBckgroundColor} />
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    );
  }
}
0 голосов
/ 14 июня 2019

Используйте window.scrollY вместо window.screenY, а также свяжите метод handleScroll. 

handleScroll = (e) => {
    if (window.scrollY > 100) {
      this.setState({
        navBckgroundColor: `red`
      });
    } else {
      this.setState({
        navBckgroundColor: `blue`
      });
    }
  }

Рабочая демоверсия

0 голосов
/ 14 июня 2019

Пожалуйста, используйте 

handleScroll = e => {
    console.log(e.target.scrollTop);
    if (window.scrollY > 100) {
      this.setState({
        navBckgroundColor: `red`
      });
    } else {
      this.setState({
        navBckgroundColor: `blue`
      });
    }
  }

Пожалуйста, смотрите рабочий код на: 

https://codesandbox.io/s/friendly-swirles-bwl06

также ваш window.screenX всегда будет выводить одно и то же значение и, следовательно, не менять цвета.

Я также изменил это в коде

...