Загрузилась ли страница на ReactJS

389

06 февраля 2017, 18:09

Пытаюсь написать модальное окно на React Js, чтоб оно появлялось сразу после загрузки страницы. Проверка как в нативном JS через window.onload = funciton() {} не работает.

Помимо этого хотел бы поинтересоваться на счет правильности моего хода мыслей: создаю компонент ModalWindow(например).js , там пишу разметку и в render() {} пишу JS код. Затем стилизую и запускаю уже в компоненте основной страницы?

import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Modal.css';
import Link from '../Link';
class Modal extends React.Component {
  static propTypes = {
    model: PropTypes.object.isRequired,
  };

  render() {
    window.onload = function () {
      document.getElementsByClassName('closeBtn').onClick = function () {
        document.getElementsByClassName('modalWindow').style.display = 'none';
      };
    };
    return (
      <div className={s.modalWindow}>
        <div className={s.modal}>
          <h1>Modal window</h1>
          <p>fdsifjiodsjfiodsjiofjdsiojfioejwfiowejio jioewfjfiojewifwe jiowfj</p>
          <button className = {s.closeBtn}></button>
        </div>
      </div>
    );
  }
}

export default withStyles(s)(Modal);

Answer 1

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

Самый простой вариант как-то так. В конструкторе определим начальное состояние окна:

constructor() {
    super();
    this.state = {
        open: false,
    }
}

Далее методы для управления состоянием:

hide() {
    this.setState({
        open: false,
    });
}
show() {
    this.setState({
        open: true,
    });
}

После того, как компонент отрендерился, в методе componentDidMount() показываем окно:

componentDidMount() {
    this.show();
}

и немного поправим метод render()

return (
  <div className={this.state.open ? 'show': 'hide'}>
    <div className={s.modal}>
      <h1>Modal window</h1>
      <p>fdsifjiodsjfiodsjiofjdsiojfioejwfiowejio jioewfjfiojewifwe jiowfj</p>
      <button onClick={() => this.hide()} className = {s.closeBtn}></button>
    </div>
  </div>
);