React：如何关闭从父组件打开的子组件的模态

Question

我通过将父状态作为道具传递给子组件来打开子组件模态。有没有办法从子组件本身关闭模态而不受父组件的任何干扰。

class Parent extends Component {

    constructor(props) {
      super(props);
      this.showModal = this.showModal.bind(this);
      this.state = {
        showModal: false
      };
    }
    showModal() {
      this.setState({ showModal: true });
    }
    renderRow() {
      return (
        <tr>
          <td onClick={() => this.setState({ show: true })}>test</td>
          <ChildModal show={this.state.showModal}/>
        </tr>
      );
    }
}


class ChildModal extends Component {
  render() {
    return (
       <Modal show={this.props.showModal}>
            <Modal.Header closeButton> 
            <Modal.Title>Test</Modal.Title> 
            </Modal.Header>
            <Modal.Body> 
                {/* some text */}
            </Modal.Body>
        </Modal>
    );
  }
}

我希望我的孩子模态是独立的。这在反应中甚至可能吗？

Answer 1

你需要传递callback as a props的Child component，它会更新Parent Component when you click on closeButton in child。

// Parent Component
callbackModal = () => {
   this.setState({ showModal: false });
}
//ChildButton
closeButtonClickHandler = () => {
  this.props.callbackModal();
}