В чем ошибка в использовании jQuery?

Question

[Ninja Mate]

в head посталил такой скрипт

<script>
		$(document).ready(function(){
    			$("#react-dat").mouseover( function(){console.log('im hover')});
		});
	</script>

а вот и сам элемент

<a onClick={ ()=>console.log('HI') } id="react-dat">react-dat</a>

При наведении мышкой не происходит ничего. В чем ошибка?

Answer 1

[Alex Zeit]

ну потому что все внутри $(document).ready отрабатывается сразу после загрузки,
а так как элемента $("#react-dat") еще нет в дом дереве - то и нет привязки)

вещайте инициализатор после монтирования елемента (componentDidMount)
Lifecycle methods
React components

наверное вот более правильное решение если уж нужно использовать jQuery

export default class Link extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.onMouseEnterHandler()
  }

  onMouseEnterHandler() {
    $(this.refs.link).mouseover(function(ev){
      console.log(ev.currentTarget.text)
    });
  }

  render() {
    return (
        <a href='' ref='link'>My link</a>
    );
  }
}

или вот более расширенное

export default class Link extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: 'Login'
    };
  }
  componentDidMount() {
    this.onMouseEnterHandler()
  }
  shouldComponentUpdate(nextProps, nextState) {
    return nextState.title !== this.state.title;
  }

  changeLoginState() {
    this.setState(({title}) => {
      return {title: 'Log out'};
    });
  }

  onMouseEnterHandler() {
    const link = $(this.refs.link)
    link.mouseover((ev) => {
      console.log(ev.currentTarget.text)
    });
    link.on('click', (ev) => {
      ev.preventDefault()
      this.changeLoginState()
    });
  }

  render() {
    const {title} = this.state
    return (
      <a href='' ref='link'>{title}</a>
    );
  }
}

Comments

[Ninja Mate]

Подскажите, а как мне jquery в реакт запихнуть?

"use strict";
const ClickOnHover=()=> {
    $(document).ready(function(){
    			$("#react-dat").mouseover( function(){console.log('im hover')});
    });
};

export default ClickOnHover;

теперь его на componentDidMount нужно поставить, но как? ClickOnHover, this.ClickOnHover, ClickOnHover() все пробовал, не работает

[Alex Zeit]

Ninja Mate:
обновил ответ выше

[Ninja Mate]

Oleksandr Riabokon: еще такой вопрос, а как кроме setTimeout можно заставить ждать появление css класа в дереве. у меня задача к сторонней библиотеке повесить свою функцию на класс, но эта ссылка появляется от действий пользователя, а не сразу с элементом(календарь выскакивает, а если на него нажать, то список с годами, нужен этот список, его не существует еще, когда календарь рендерится)

[Alex Zeit]

Мутейшн обсервер )) но пока что все не так хорошо поддерживается. А по хорошему - к дейтпикеру должно быть апи.

[Alex Zeit]

https://m.habrahabr.ru/post/202366/

[Ninja Mate]

Oleksandr Riabokon: не знал про такое, спасибо

Answer 2

[Михаил]

Элемент появляется после назначения события.