Question

我有一个带有以下道具的按钮组件：

onClick: () => void-单击触发器按钮
Caption: string-按钮文字

还有一个Popup组件，它具有以下道具：

onCancelPopup: () => void-置于取消按钮
onOkPopup: () => void-如果用户选择确定，则触发
IsPopupVisible: boolean-确定弹出窗口的可见性
PopupMessage: string-类似于确认消息

我正在尝试创建一个由Button和Popup组成的包装器组件。使用这个包装器，我想触发弹出对话框。我打算在具有多个按钮的页面中使用此按钮，每个按钮都会触发自己的确认弹出窗口。

最简单的方法是将其包装在BtnConfirm包装器组件中，如下所示：

<>
    <Button onClick={this.props.showPopup} Caption={this.props.Caption} />
    <Popup IsPopupVisible={this.props.Visible} onCancelPopup={this.props.hidePopup}>
        {this.props.PopupMessage}
    </Popup>
</>

说CallingComponent正在使用<BtnConfirm />。然后，它将需要在其状态下定义Visible并在单独的函数中显示/隐藏它如下：

showPopup = () => setState({ Visible: true })
hidePopup = () => setState({ Visible: false })
popupOkClick = () => alert("OK Clicked");

并且<BtnConfirm />必须在Button中以Popup的形式接收props和CallingComponent的所有道具。

我的问题是，如果我在BtnConfirm中有多个CallingComponent实例，那是否意味着我需要为每个实例定义Visible状态？有没有一种更好的方法可以达到相同的结果而不必这样做？

为带有确认弹出组件的按钮创建包装器

0 个答案: