道具变更时更新状态

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