dash 中的模式匹配回调函数Pattern-Matching Callbacks 8

模式匹配

模式匹配回调选择器 MATCH、ALL 和 ALLSMALLER 允许您编写可以响应或更新任意或动态数量组件的回调函数。

此示例呈现任意数量的 dcc. Dropdown 元素，并且只要任何 dcc. Dropdown 元素发生更改，就会触发回调。尝试添加几个下拉菜单并选择它们的值，以查看应用程序如何更新。

效果：

代码

python 复制代码

# 导入Dash库及其相关组件  
from dash import Dash, dcc, html, Input, Output, ALL, Patch, callback

# 创建一个Dash应用实例  
app = Dash(__name__)

# 设置应用的布局  
app.layout = html.Div(
    [
        # 添加一个按钮，用于添加过滤器，id为"add-filter-btn"，并设置初始点击数为0  
        html.Button("添加过滤器", id="add-filter-btn", n_clicks=0),
        # 创建一个div容器，用于存放下拉菜单组件，id为"dropdown-container-div"，初始子元素为空  
        html.Div(id="dropdown-container-div", children=[]),
        # 创建一个div容器，用于显示下拉菜单的选择结果，id为"dropdown-container-output-div"  
        html.Div(id="dropdown-container-output-div"),
    ]
)


# 定义一个回调函数，当"add-filter-btn"按钮被点击时触发
@callback(
    # 设置输出目标为"dropdown-container-div"的子元素  
    Output("dropdown-container-div", "children"),
    # 设置输入源为"add-filter-btn"的点击事件  
    Input("add-filter-btn", "n_clicks")
)
def display_dropdowns(n_clicks):
    # 创建一个Patch对象，用于存放新的下拉菜单组件  
    patched_children = Patch()
    # 创建一个新的下拉菜单组件，包含四个城市选项，id根据点击次数动态生成  
    new_dropdown = dcc.Dropdown(
        ["NYC", "MTL", "LA", "TOKYO"],
        id={"type": "city-filter-dropdown", "index": n_clicks},
    )
    # 将新的下拉菜单组件添加到Patch对象中  
    patched_children.append(new_dropdown)
    # 返回Patch对象，更新"dropdown-container-div"的子元素  
    return patched_children


# 定义一个回调函数，当下拉菜单的值发生变化时触发
@callback(
    # 设置输出目标为"dropdown-container-output-div"的子元素  
    Output("dropdown-container-output-div", "children"),
    # 设置输入源为所有"city-filter-dropdown"类型的下拉菜单的值变化事件  
    Input({"type": "city-filter-dropdown", "index": ALL}, "value"),
)
def display_output(values):
    # 遍历所有下拉菜单的值，创建一个包含结果的div组件列表  
    return html.Div(
        [html.Div(f"下拉菜单 {i + 1} = {value}") for (i, value) in enumerate(values)]
    )


# 当脚本作为主程序运行时，启动Dash应用，并开启调试模式
if __name__ == "__main__":
    app.run(debug=True)