На главную
ПРАВИЛА FAQ Помощь Участники Календарь Избранное DigiMania RSS
msm.ru
Модераторы: ElcnU, ANDLL, fatalist
  
> React.js добавить класс к элементу при событии hover
    Всем привет!
    Есть ли специалисты по React.js?
    К сожалению, в тырнете мало информации для начинающих с этой библиотекой.

    Хочу добавить класс к картинке, при hover'е.
    Нашёл решение:
    https://stackoverflow.com/questions/4457572...-class-on-hover
    Событие обрабатывается, но класс не добавляется.
    Вот код, что тут не так?
    ExpandedWrap disabled
      import React from 'react';
      import ReactDOM from 'react-dom';
       
      class ServicesRow extends React.Component {
          
          handleHover(){                
              
              this.setState({
                  isHovered: !this.state.isHovered
              });
          }
          
        render() {
          this.state = { isHovered: false };
          const imgClass = this.state.isHovered ? "animated pulse" : "";    
          return (
            <div className="row">
                  <div className="col-md-6 col-lg-4 wow fadeInUp" data-wow-duration="3s"> <img src="http://lorempixel.com/400/200/" className={imgClass} onMouseEnter={this.handleHover.bind(this)} onMouseLeave={this.handleHover.bind(this)} alt="Interneto svetainių kūrimas" />                                
                  </div>
              </div>
          )
        }
      }
       
      module.exports = ServicesRow;
      Вопрос на засыпку - а нахрена менять класс и делать ререндер, когда для этого есть CSS?
      user posted image user posted image user posted image
        В React.js часто юзают инлайн стили.
        К слову, вопрос решил - не хватало конструктора:
        ExpandedWrap disabled
              constructor(props) {
                  super(props);
                  this.state = {
                      isHovered: false
                  };        
                }
          Цитата Kuzma @
          К сожалению, в тырнете мало информации для начинающих с этой библиотекой.

          книжки есть там написано что да как :D
          "What I cannot create, I don't understand" Richard Feynman.
          https://github.com/Cfon/
          :D
            Цитата
            книжки есть там написано что да как :D

            ага, либо устаревшие методы, либо для экспертов :)
              Цитата Kuzma @
              Цитата
              книжки есть там написано что да как :D

              ага, либо устаревшие методы, либо для экспертов :)

              еще один :D
              вот например "ReactJS by Example - Building Modern Web Applications with React" Vipul, Prathamesh, Sonpatk,
              эта как тебе тоже устаревшая? :D

              или вот книжка вышла для начинающих "React.js Быстрый старт. Стоян Стефанов, 2017"
              возможно тоже устарела, но же не чайник да? совмещай чтение книжки и просмотр офиц.документации ReactJS :D
              Сообщение отредактировано: Cfon -
              "What I cannot create, I don't understand" Richard Feynman.
              https://github.com/Cfon/
              :D
                Не спорю
                Но там не будет ответов на интересующие сейчас меня вопросы: почему полностью не работает сторонний jQuery слайдер, как передать не событие onClick через массив в другой компонент и т.д. :)
                Всё это хорошо для базы, но специфические вопросы решить без сторонней помощи не поможет
                  Цитата Kuzma @
                  Не спорю
                  Но там не будет ответов на интересующие сейчас меня вопросы: почему полностью не работает сторонний jQuery слайдер, как передать не событие onClick через массив в другой компонент и т.д. :)
                  Всё это хорошо для базы, но специфические вопросы решить без сторонней помощи не поможет

                  ну да форум на то и нужен :)
                  "What I cannot create, I don't understand" Richard Feynman.
                  https://github.com/Cfon/
                  :D
                    Так точно :)
                    1 пользователей читают эту тему (1 гостей и 0 скрытых пользователей)
                    0 пользователей:


                    Рейтинг@Mail.ru
                    [ Script Execution time: 0,0843 ]   [ 14 queries used ]   [ Generated: 24.08.19, 02:31 GMT ]