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

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 组件中，我有一个函数可以将 props 传递给具有模态的组件：

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 组件（让 modalComponentProps= { show: this.props.show, ... 发生的地方）-> 实际模态组件

Code on CodePen

Answer 1

看shouldComponentUpdate方法

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

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

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