道具變更時更新狀態

Question

我有更新道具的問題。

---

我有兩個組成部分 。

第一個是App，其中有一個用於打開或關閉模式的按鈕。

第二是模態結構。
第一個組件存儲狀態，我單擊按鈕，狀態發生變化，我將道具發送給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

Modal Component中的狀態會更改，但是您沒有使用它來設置Modal組件上的isOpen道具。

同樣，您也不得使用可直接從道具派生的狀態。 您必須改為從父級傳遞處理程序以更新父級本身的狀態

模態組件

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;

應用程式

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 在這里 。