Как сделать так что бы модальное окно закрывалось по клику на кнопку во вложенном компоненте

Question

довольна типичная задача. Есть модальное окно с формой авторизации и кнопкой "Зарегистироваться" при клике на которую текущее модальное окно должно заменяться на модальное окно с формой регистрации. Как это реализовать на реакте? Застопорился на том что модальные окна наслаиваются, а должны заменятся. Подскажите, какова логика должна быть, или может подходящую библиотеку для этого.

Answer 1

Сделать можно по разному. Если "регистрация" и "авторизация" это 2 разных компонента модалок, то самое простое что приходит на ум - это условный рендеринг (см. документацию реакта).

Т.е. в общем компоненте создаем state с флагами для отображения каждой из модалок, заводим методы для изменения этих флагов, байндим их к текущему контексту, чтобы он не потерялся и при помощи условного рендеринга выводим эти обе модалки одновременно в родительском компоненте, передавая туда методы для их замены изнутри.

Т.е. внутри компонента модалки авторизации, по клику на "зарегистрироваться" мы просто будем вызывать метод из пропсов и изменять состояние родительского компонента, на основании которого реакт уже решит какую модалку отрендерить.

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isAuthModal: false,
      isRegModal: false
    }
    this.showAuthModal = this.showAuthModal.bind(this)
    this.showRegModal = this.showRegModal.bind(this)
    this.closeModal = this.closeModal.bind(this)
  }
  
  showRegModal() {
    this.setState({
        isAuthModal: false,
      isRegModal: true
    })
  }
  
  showAuthModal() {
    this.setState({
        isAuthModal: true,
      isRegModal: false
    })
  }
  
  closeModal() {
    this.setState({
        isAuthModal: false,
      isRegModal: false
    })
  }
  
  render() {
    return (
        <div>
          <button onClick={this.showAuthModal}>Авторизоваться</button>
          {
            this.state.isAuthModal &&
            <AuthModal
               onChangeModal={this.showRegModal}
               onClose={this.closeModal}
            />
          }
          {
            this.state.isRegModal &&
            <RegModal
              onChangeModal={this.showAuthModal}
              onClose={this.closeModal}
            />
          }
        </div>
    )
  }
}

Стандартный редактор не срабатывает, по этому ссылка на jsfiddle

БЛОГ НА HUSL

Как сделать так что бы модальное окно закрывалось по клику на кнопку во вложенном компоненте

Ответы (1 шт):