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，它将更新Parent Component when you click on closeButton in child。

// 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

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

简单地定义一个方法，该方法将关闭父组件中的模态，将其作为prop传递给子组件，然后在那里调用它。

//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

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

父组件控制模态的打开和关闭状态，因此为了能够从子组件中关闭模态，您必须在父组件上定义一个函数>=2020-10-03T00:00，该函数将设置{ {1}}变量（在父组件的状态中定义），从true到false。

closeModal

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

反应：如何关闭从父组件打开的子组件的模态

5 个答案: