React：關閉來自Parent的Child Component中的Modal

Question

我在子組件中有一個模態，用於處理父組件中的刪除功能。 孩子持有模態的狀態（打開或關閉），因為這似乎是最合乎邏輯的地方。

親

 removeItem() {
   console.log('clicked');
  };

 ...

 <DeleteButton deleterecord={()=>this.removeItem(data.row._original._id)}/>

兒童

close() {
  this.setState({ showModal: false })
};

open() {
  this.setState({ showModal: true })
};


render() {

 return(
  <div>
    <Button
    bsStyle="primary"
    bsSize="small"
    onClick={this.open.bind(this)}
  >
    Delete
  </Button>

  <Modal
    show={this.state.showModal}
    onHide={this.close.bind(this)}
    bsSize="small"
    >
   ...

在removeItem代碼運行后，如何從父級關閉模式。

Answer 1

你可以用ref來調用子關閉函數嗎？

親

    removeItem() {
       console.log('clicked');
       this.child.close();
    }

   render() {
      return (
         <div>
            <ChildWithModal ref={(ref) => { this.child = ref; }} />
         </div>
      );
   }

兒童

...

close() {
   this.setState({ showModal: false })
};