React：如何关闭从父组件打开的子模式答案

【问题标题】：React: How to close a modal from child opened from parent componentReact：如何关闭从父组件打开的子模式
【发布时间】：2019-09-30 02:49:46
【问题描述】：

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

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

我希望我的子模态是自包含的。这甚至可能在反应中。

【问题讨论】：

使用 redux，全球商店

标签： javascript reactjs

【解决方案1】：

您需要在Child component 中传递一个callback as a props，它将更新Parent Component when you click on closeButton in child。

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

【讨论】：

【解决方案2】：

局部状态变量只能在声明它的组件内部进行控制。

如果不从父组件传递改变向下传递状态的方法，您将无法从子组件内部关闭模式。

因此，为了关闭您的模式，您需要创建一个方法 this.closeModal 并将其从父级传递给子级...

// Parent
closeModal = () => {
  this.setState({showModal: false});
}
// ...
<ChildModal show={this.state.showModal} handleClose={this.closeModal} />
// ...

【讨论】：

【解决方案3】：

是的，你可以从子组件中关闭它，但是你至少需要父组件的一点干扰，那是因为你已经在父组件中定义了这个模型的切换状态。

只需在父组件中定义一个关闭模态框的方法，将其作为道具传递给子组件，然后在那里调用它。

//in your parent component 
handleModalClose = ()=>{
this.setState({showModal: false})}

现在将它传递给您的子组件，然后在类似的事件中调用它

this.props.handleModalClose()

【讨论】：

【解决方案4】：

class Parent extends Component {

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

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

【讨论】：

【解决方案5】：

当您在父组件中定义状态时，该状态周围的几乎所有内容都是从那里处理的。子组件只能以 props 的形式从父组件接收数据。

父组件控制模态框的打开和关闭状态，因此为了让您能够从子组件关闭模态框，您必须在父组件上定义一个函数closeModal，该函数将设置showModal变量（在父组件的状态中定义）从 true 变回 false。

closeModal = () => {
      this.setState({ showModal: false });
    }

然后将此函数作为道具传递给子组件并从那里调用该函数。当您点击 modal 上的关闭按钮时，状态将在父组件上更新。

【讨论】：