Question

我在父级中设置模态组件的状态以处理打开和关闭它。初始显示状态为false，在单击事件中，显示状态变为true，并显示模态弹出窗口。这是正常的，问题是我无法关闭它。我似乎无法在子组件的父组件中调用handleHide函数。

class Parent extends Component {
    constructor(props) {
      super(props);
      this.handleHide = this.handleHide.bind(this);
      this.state = {
        show: false
      };
    }
    handleHide() {
      this.setState({ show: false });
    }
    renderRow() {
      return (
        <tr>
          <td onClick={() => this.setState({ show: true })}>test</td>
          <ChildModal show={this.state.show} handleHide={this.handleHide}/>
        </tr>
      );
    }
}


class ChildModal extends Component {
  render() {
    return (
       <Modal onHide={() => this.props.handleHide()} show={this.props.show}>
            <Modal.Header closeButton> 
            <Modal.Title>Test</Modal.Title> 
            </Modal.Header>
            <Modal.Body> 
                {/* some text */}
            </Modal.Body>
        </Modal>
    );
  }
}

Answer 1

您的问题是您将onHide作为道具传递给Modal组件。在Modal内，您需要定义onHide的含义

Answer 2

如果使用reactstrap，请使用这样的模式：首先从reactstrap

导入所有内容

<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
      <ModalHeader toggle={this.toggle}>Modal 

title</ModalHeader>
          <ModalBody>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
              </ModalBody>
              <ModalFooter>
                <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
                <Button color="secondary" onClick={this.toggle}>Cancel</Button>
              </ModalFooter>
            </Modal>

React - 设置父组件的状态以关闭子组件

2 个答案: