javascript - react : Closing Modal in Child Component from Parent

Question

我在子组件中有一个模式，它处理父组件中的删除功能。 child 持有模态(打开或关闭)的状态，因为这似乎是最合乎逻辑的地方。

父级

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

 ...

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

child

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

child

...

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