React-bootstrap模态对属性变化不反应

Question

我正在使用React V18.1，React-Bootstrap v2.4。我有一个模态组件，试图在按钮上显示。模态组件非常简单：

class AdjustmentModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            'show': this.props.show
        };

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

    handleClose() {
        this.setState({ show: false })
    }

    render() {
        return (
            <Modal show={this.state.show} onHide={this.handleClose}>
                [ ... Modal Content Here ... ]
            </Modal>
        );
    }
}

export default AdjustmentModal;

如您所见，我将模式的show属性绑定到状态中的show的值。

然后，在我要显示模式的组件中，我有以下内容：

// Within render() ...
<AdjustmentModal 
    show={this.state.showAdjustment}
    partNo={this.state.partNo}
    onHandQty={this.state.onHandQty}
/>
// Futher on in the code, display the modal on click:
<Button className="icon" onClick={this.handleDisplayAdjustment}>
    <i className="bi bi-pencil-square"></i>
</Button>

andledisplayAdjustment：

handleDisplayAdjustment(event) {
    event.preventDefault();
    this.setState({
        showAdjustment : true
    });
}

现在，尽管值show> showdjustment在父母中，模态不显示。

我可以设置＆lt; modal show = {this.props.show} .../＆gt;而不是阅读，因此，如果阅读，则无法再次关闭模态来自道具而不是状态。

Answer 1

您可以使用道具，如果要关闭，这是一种更好的处理方法是模态组件和模态的子组件将获得更新的值，该值将是错误的。以下是如何实现这一目标的代码。

closeModal() {
  this.setState({
  showAdjustment: false
})
}

// Within render() ...
<AdjustmentModal 
    show={this.state.showAdjustment}
    partNo={this.state.partNo}
    onHandQty={this.state.onHandQty}
    onClose={this.closeModal.bind(this)}
/>
// Futher on in the code, display the modal on click:
<Button className="icon" onClick={this.handleDisplayAdjustment}>
    <i className="bi bi-pencil-square"></i>
</Button>

对于儿童组件

    class AdjustmentModal extends React.Component {

    handleClose() {
        this.props.onClose()
    }

    render() {
        return (
            <Modal show={this.props.show} onHide={this.handleClose}>
                [ ... Modal Content Here ... ]
            </Modal>
        );
    }
}

export default AdjustmentModal;

编辑：解释方法
这将使您的模态组件成为由父母控制的受控组件，也将道具作为子组件内部的状态更新不正确，这可能会产生潜在的错误。