Блог

Здесь вопрос новичка. Как мне запустить компонент переключения модального параметра из родительского компонента? Я хочу, чтобы модал открывался при нажатии кнопки на родительском компоненте. Кнопка отправит форму, и как только форма будет отправлена, я хочу, чтобы модал запустился. Я пытаюсь запустить его в function handleSubmit(e)

Дочерний компонент: Modal.jsx

 class ModalExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false
    };

    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState(prevState => ({
      modal: !prevState.modal
    }));
  }

  render() {
    return (
      <div>
        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
        </Modal>
      </div>
    );
  }
}
  

Путь: Parent.jsx

 export default function ForgotPassword() {
  function handleSubmit(e) {
    e.preventDefault();
  }

  return (
    <div className="container h-100">
      <ModalExample toggle />
      <button onClick={this.handleSubmit}>Open modal</button>
    </div>
  );
}
  

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

 export default function ForgotPassword() {
      function handleSubmit(e) {
        e.preventDefault();
      }

      return (
        <div className="container h-100">
          <ModalExample  ref={instance => { this.child = instance; }}  />
          <button onClick={() => { this.child.toggle(); }}>Open modal</button>
        </div>
      );
    }
  

Могли бы быть способы получше, но способ, которым я это сделал, заключается в том, что я перенес функцию переключения в родительский класс и передал как функцию, так и значение состояния в modal в props.

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

Дочерний компонент: Modal.jsx

 class ModalExample extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <Modal isOpen={this.props.modal} toggle={this.props.toggle} className={this.props.className}>
          <ModalHeader toggle={this.props.toggle}>Modal title</ModalHeader>
        </Modal>
      </div>
    );
  }
}
  

Родительский: Parent.jsx

 class ForgotPassword() extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      modal: false
    };
    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState(prevState => ({
      modal: !prevState.modal
    }));
  }

  return (
    <div className="container h-100">
      <ModalExample toggle={this.toggle} modal={this.state.modal} />
      <button onClick={this.handleSubmit}>Open modal</button>
    </div>
  );
}