Как правильно менять состояние потомка (или вызывать функции) из родителя в React.Js?

Question

[vilix]

Как правильно менять состояние потомка (или вызывать функции) из родителя в React.Js?

Этот вопрос возник при реализации следующей логики:
есть кнопка "регистрация" при нажатии на которую должно появиться диалоговое окно с полями для регистрации и кнопкой "подтвердить". При нажатии кнопки "подтвердить" мне нужно выполнить например функцию signup в конце которой мне нужно закрыть это диалоговое окно.

Моя текущая реализация с использованием react-bootstrap:

ModalInstance.js:

import React from 'react';
import { Button, Modal } from 'react-bootstrap';

const ModalInstance = React.createClass ({
  
  getInitialState() {
    return { showModal: false };
  },

  close() {
    this.setState({ showModal: false });
  },

  open() {
    this.setState({ showModal: true });
  },

  render() {
    return (
      <div id={this.props.id}>
        <Button bsStyle="primary" onClick={this.open}>{this.props.buttonName}</Button>
        <Modal ref="modal" show={this.state.showModal} onHide={this.close}>
          <Modal.Header closeButton>
            <Modal.Title>{this.props.title}</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            {this.props.children}
          </Modal.Body>
        </Modal>
      </div>
    );
  }
})

module.exports = ModalInstance;

header.js:

...
const Header = React.createClass ({
  signup() {
    ...
    let modal = this.refs.modal;
    modal.close();
  },
render() {
               ...
              <ModalInstance
                ref="modal" 
                id="signupModalButton" 
                title="Sign up"
                buttonName="Sign up">
                  <form>
                    ...
                    <Button bsStyle="primary" onClick={this.signup}>Sing up</Button>
                  </form>
              </ModalInstance>
}

Смущает, то что я использую refs, в документации советуют избегать использования этого механизма для понятного data-flow. Насколько анти-патерно мое решение и как сделать это в стиле react way?

Будет ли более правильным подходом сделать например в header showModal состояние и передавать его в modalinstance через props и использовать его в getInitialState()?

Answer 1

[Roman_Kh]

Сделайте компонент SignupModal, который будет представлять модальное окно для регистрации со всеми параметрами и кнопками. А в него потом передавайте функцию для вызова при нажатии на кнопку.

class SignupModal ... {
   ...
   handleSignupButton(){
      // do something
      if(this.props.onSignup)
        this.props.onSignup()
   }

   render(){
       ...
       <Button .... onClick={this.handleSignupButton} />
       ...
   }
}

class SomeComponent ... {
   ...
   handleSignup(){
      // do something
   }

   render(){
      ...
     <SignupModal ... onSignup={this.handleSignup} />
      ...
   }
   ...
}

Comments

[vilix]

Это получается мне нужно из modalInstance сделать signupModal т.е все поля и кнопки модальной формы описывать в ней же. А я хотел чтобы modalInstance была компонентом презентации, и я мог её использовать многократно для других диалоговых окон меняя лишь параметры и внутренние содержание. Про технику колбеков через props я осведомлен, я тут хочу именно с родительского компонента передать состояние в дочерний, а не передать событие из дочернего в родительский.

[vilix]

Roman_Kh хотя немного подумав, я пришел к выводу, что я хотел сделать многоразовый компонент который бы из вне мог менять свое поведение, что действительно не правильно, а то что предлагаете вы по видимому действительно истина. Чтобы оставить компонент многоразовым я могу добавить всего лишь кнопку закрытия формы она же "подтвердить" для случая регистрации. Тогда конечно компонент немного теряет в универсальности, допустим если для другого диалога мне понадобится в последней строке не одна кнопка, а две.. Подожду пока еще вариантов решения.

[Roman_Kh]

Если речь только про закрытие окна, то у Modal ровно для этого есть prop под названием show. В вашем методе signup выставляйте state, например, showModal=false, это вызовет render , в котором вы установите новое значение для show (this.state.showModal) - и окно пропадет.

Ваш ModalInstance почти ничем не отличается от Modal, тем самым только усложняя работу с ним.
Сейчас вы как раз пытаетесь собрать обратно единое поведение Modal, которое вы размали по ModalInstance и Header.

Для простоты можете просто добавить prop show к своему ModalInstance, который затем будете просто передавать в Modal при render'е.

[vilix]

Roman_Kh: спасибо вам, я только сейчас понял, что в итоге все размазал и запутался, самое смешное, что я изначально делал как раз как вы написали signupModal, потом стукнуло в голову, что надо написать универсальный компонент и поехало.. :)