React：从父级关闭子组件中的模态

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 })
};