Обновление состояния при смене реквизита

Question

У меня проблема с реквизитом для обновления.У меня есть два компонента.Первое - это приложение, в котором есть кнопка, которая открывает или закрывает модальное окно.Второе - это модальная структура.Первый компонент хранит состояние, я нажимаю на кнопку, состояние меняется, я отправляю реквизит компоненту ModalComponent (модальный режим открывается).И в этом компоненте следует изменить это состояние, если я хочу закрыть модальное.Но если я нажму на кнопку Cancel в модальном режиме, ничего не произойдет.Состояние не меняется.Как это изменить, как бы это сделало общение между ребенком и родителем?Это мой код ModalComponent

import React, { Component } from "react";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";

class ModalComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      modal: props.modal
    };

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

  toggle() {
    const { modal } = this.state;
    this.setState({
      modal: !modal
    });
  }

  render() {
    const { modal } = this.props;
    return (
      <div>
        <Modal isOpen={modal} toggle={this.toggle}>
          <ModalHeader toggle={this.toggle}>Halo</ModalHeader>
          <ModalFooter>
            <Button onClick={this.toggle}>Cancel</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

export default ModalComponent;

Приложение

import React from "react";
import ReactDOM from "react-dom";
import Modal from "./modal";
import { Button } from "reactstrap";

import "./styles.css";

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

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

  toggle() {
    const { modal } = this.state;
    this.setState({
      modal: !modal
    });
  }

  render() {
    const { modal } = this.state;
    return (
      <div>
        <Button
          type="link"
          onClick={this.toggle}
        >
          Delete account
        </Button>
        <Modal modal={modal} />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

Состояние в вашем Модальном Компоненте изменится, но вы не используете его для установки реквизитов isOpen на компоненте Modal.

Также вы не должны использовать состояние, которое напрямую выводится из реквизита.Вместо этого вы должны передать обработчик из Parent, чтобы обновить состояние самого родительского элемента

ModalComponent

import React, { Component } from "react";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";

class ModalComponent extends Component {
  render() {
    const { modal } = this.props;
    return (
      <div>
        <Modal isOpen={modal} toggle={this.toggle}>
          <ModalHeader toggle={this.props.toggle}>Halo</ModalHeader>
          <ModalFooter>
            <Button onClick={this.props.toggle}>Cancel</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

export default ModalComponent;

App

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

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

  toggle() {
    const { modal } = this.state;
    this.setState({
      modal: !modal
    });
  }

  render() {
    const { modal } = this.state;
    return (
      <div>
        <Button
          type="link"
          onClick={this.toggle}
        >
          Delete account
        </Button>
        <Modal modal={modal} toggle={this.toggle}/>
      </div>
    );
  }
}

Answer 2

Как у вас сейчас, модал устанавливает свое собственное состояние, но он все еще получает реквизит от родителя, который держит его открытым.

Вот пример одного из способов сделать это.Обратите внимание, что как открытие, так и закрытие имеют дело с использованием состояния родителя, а не состояния ребенка.

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  state = { open: false };

  toggle = () => {
    this.setState({ open: !this.state.open });
  };

  render() {
    return (
      <React.Fragment>
        something
        <Modal show={this.state.open} />
        <Child toggle={this.toggle} />
      </React.Fragment>
    );
  }
}

const Child = ({ toggle }) => {
  return <button onClick={toggle}>toggle</button>;
};

const Modal = ({ show }) => {
  if (show) {
    return <h1>I am a modal</h1>;
  }

  return null;
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

CodeSandbox здесь .