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 callback as a props传递， when you click on closeButton in child Parent Component when you click on closeButton in child ，它会更新Parent Component 。

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

Answer 2

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

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

所以为了关闭你的模态，你需要创建一个方法this.closeModal并将它从父级传递给子级......

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

Answer 3

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

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

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

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

this.props.handleModalClose()

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

Answer 5

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

父组件控制模态的打开和关闭状态，以便您能够从子组件关闭模态，您必须在父组件上定义一个函数closeModal ，该函数将设置showModal变量（在状态中定义）你的父组件）从真回到假。

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

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