Как добавить новый класс только к одному элементу на карте, используя событие прокрутки - PullRequest
Новая
       18

Как добавить новый класс только к одному элементу на карте, используя событие прокрутки

0 голосов
/ 05 июля 2019

Я пытаюсь добавить новый класс в li, когда window.scrollY имеет правильное значение.До сих пор мне удавалось это сделать, но у меня возникла проблема, заключающаяся в том, что, когда я добавляю новый класс li на карту, все они получают его.Мне интересно, как я могу добавить новый класс только к одному элементу. 

  constructor(props) {
    super(props);

    this.state = {
      newStyle: false,
    };
    this.handleStyleChange = this.handleStyleChange.bind(this)
  }

  componentDidMount() {
    window.addEventListener('scroll', this.handleStyleChange, true);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleStyleChange, true);
  }


  handleStyleChange() {
    if (window.scrollY > 970 && window.scrollY < 1660) {
      return this.setState({ newStyle: true })
    }
    return this.setState({ newStyle: false });
  }


  render() {
    const { newStyle } = this.state

    return (
          <div className={active ? 'links active' : 'links'}>
            {links.map((link, i) =>
              <li
                className={newStyle ? 'scrolled-li' : ''}
                key={link.id}>
                <a href={link.href}>{link.name}</a>
              </li>)}
          </div>
    )
  }

Я ожидаю добавить .scrolled-li только к первому li, когда handleStyleChange () будет истинным

Ответы [ 2 ]

0 голосов
/ 05 июля 2019

Первый вопрос приходит мне в голову, почему вы хотите это сделать? это правильный способ сделать это? Вы можете сделать это, проверив индекс 0 или нет. 

{links.map((link, i) =>
              <li
                className={newStyle && i === 0 ? 'scrolled-li' : ''}
                key={link.id}>
                <a href={link.href}>{link.name}</a>
              </li>)}
0 голосов
/ 05 июля 2019

Два способа добиться этого:

1) Это добавит класс только к первому элементу. 

{links.map((link, i) =>
  <li
    className={newStyle && !i ? 'scrolled-li' : ''}
    key={link.id}>
    <a href={link.href}>{link.name}</a>
  </li>)}

2) Используйте first-child css селектор в родительском элементе.

...