Question

我已经用React Bootstrap创建了模态。尽管事实是，我正在使用onHide函数，但没有任何反应。这是我的模态：

        <React.Fragment>
            <Modal
                {...this.props}
                bsSize="large"
                aria-labelledby="contained-modal-title-lg"
                show={this.state.showModal}
                onHide={this.handleHide}
             >
            <Modal.Body>
               ...
            </Modal.Body>
            <Modal.Footer>
               <Button id = "closeModal" variant="danger" onClick= 
               {this.handleHide.bind(this)}>
                            Save and close
               </Button>
            </Modal.Footer>
            </Modal>
        </React.Fragment>

当在某个元素上单击时，我正在从其他组件传递“显示”。该元素上的onClick指定为：“ showModal：true”。然后，我将showModal传递给根据选择的选项呈现不同元素的其他组件：

{this.state.addingState && (
    <MyForm
        {...this.state.item}
        show={this.state.showModal}
        ...
    />
)}

最后，在MyForm组件中，我具有将道具传递给具有模式的组件的功能：

createModalComponent {
    ...
    let modalComponentProps= {
        ...
        show: this.props.show,
}

所以，这就是“表演”的方向。在具有模式组件的文件中，我具有用于处理隐藏的功能：

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

现在该组件中的showModal处于如下所示的状态初始化：

constructor(props) {
    super(props);

    this.state = {
        showModal: this.props.show
    };

    this.handleHide = this.handleHide.bind(this);
}

我尝试了很多事情。其他状态变量，而无需在状态中初始化showModal等。当单击按钮或超出模态时，模态仍然可见并且没有隐藏。非常感谢您的帮助和/或建议，以解决此问题。

所以，showModal的运行方式：父组件（发生this.state.addingState的地方）-> MyForm组件（其中let modalComponentProps = {show：this.props.show，...发生）->实际模态组件

Code on CodePen

Answer 1

您有2种可能性：您可以将方法添加到您的父对象并传递方法+展示的结果，如下所示（使用相同名称的道具和方法进行最佳实践，因此您不会感到困惑）：

父母

<Modal
    {...this.props}
    bsSize="large"
    aria-labelledby="contained-modal-title-lg"
    show={this.state.showModal}
    handleHide={this.handleHide}
  >

孩子

   <MyForm
        show={this.props.showModal}
        handleHide={this.props.handleHide}
    />

要从父级使用模态，可以在子级中这样称呼它：this.props.handleHide（true）。

或者您可以让孩子自己管理状态，因此可以将方法和状态放在孩子中，而不是父对象中（取决于体系结构）。

不建议在儿童状态下添加道具。另外，您可以使用es6函数来避免像这样的绑定：

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

Answer 2

看看shouldComponentUpdate方法

shouldComponentUpdate(nextProps) {
    return !isEqual(this.props, nextProps);
}

您仅在检查道具，但正在更改组件的状态。修复或删除该方法，它将起作用

模态元素没有隐藏[React＆React-Bootstrap]

2 个答案: