如何为数量未知的Dash按钮动态创建回调函数？

问题背景 #

我在Dash项目中实现了用户自定义告警功能，告警会展示在列表中，每条告警配有删除按钮。当前生成告警列表的代码如下：

@callback(
    Output('customized-list','children'),
    Input('customized-alerts-button','n_clicks'),
    State('customized_alerts','data'),prevent_initial_call=True)
def showCustomizedAlerts(_,customized_alerts):
    return [html.H2('Customized alerts', style={"textAlign": "left"}),
            html.Ul([html.Li(html.Div([
                html.Div([i],style={'display':'inline-block'}),
                html.Div([html.Button('Delete alert',id='delete-alert-button'+str(customized_alerts.index(i)))],style={'display':'inline-block'})])) for i in customized_alerts])]

现在需要为每个delete-alert-button1、delete-alert-button2…这类删除按钮实现删除功能，要求能适配任意数量的告警，替代预先创建大量回调的临时方案，避免用户创建超量告警时功能失效。

解决方案：使用Dash Pattern-Matching Callbacks #

不用循环创建回调，直接用Dash的模式匹配回调就能动态处理所有删除按钮，适配任意数量的告警。具体实现如下：

1. 修改删除按钮的ID格式 #

将原来的字符串ID改为字典格式，用type标识组件类型，index标记告警的索引：

html.Button('Delete alert', id={'type': 'delete-alert-button', 'index': customized_alerts.index(i)})

2. 编写通用删除回调 #

创建一个匹配所有type为delete-alert-button的按钮的回调，同时更新告警存储和列表渲染：

from dash import Input, Output, State, ALL

@callback(
    [Output('customized_alerts', 'data'),
     Output('customized-list', 'children')],
    Input({'type': 'delete-alert-button', 'index': ALL}, 'n_clicks'),
    State('customized_alerts', 'data'),
    prevent_initial_call=True
)
def delete_alert(n_clicks, customized_alerts):
    # 定位触发点击的按钮索引
    triggered_idx = [idx for idx, clicks in enumerate(n_clicks) if clicks][0]
    # 删除对应告警
    if customized_alerts and triggered_idx < len(customized_alerts):
        customized_alerts.pop(triggered_idx)
    # 重新渲染告警列表
    alert_list = [html.H2('Customized alerts', style={"textAlign": "left"})]
    if customized_alerts:
        alert_list.append(html.Ul([
            html.Li(html.Div([
                html.Div([alert], style={'display': 'inline-block'}),
                html.Div([
                    html.Button('Delete alert', id={'type': 'delete-alert-button', 'index': idx})
                ], style={'display': 'inline-block'})
            ])) for idx, alert in enumerate(customized_alerts)
        ]))
    return customized_alerts, alert_list

3. 优化列表渲染逻辑 #

把列表渲染逻辑抽成单独函数，避免代码重复：

def render_alert_list(customized_alerts):
    alert_list = [html.H2('Customized alerts', style={"textAlign": "left"})]
    if customized_alerts:
        alert_list.append(html.Ul([
            html.Li(html.Div([
                html.Div([alert], style={'display': 'inline-block'}),
                html.Div([
                    html.Button('Delete alert', id={'type': 'delete-alert-button', 'index': idx})
                ], style={'display': 'inline-block'})
            ])) for idx, alert in enumerate(customized_alerts)
        ]))
    return alert_list

# 原回调简化为：
@callback(
    Output('customized-list','children'),
    Input('customized-alerts-button','n_clicks'),
    State('customized_alerts','data'),prevent_initial_call=True)
def showCustomizedAlerts(_,customized_alerts):
    return render_alert_list(customized_alerts)

原理说明 #

Pattern-Matching Callbacks通过ALL匹配符，可监听同一类型的所有组件，后续新增的删除按钮会自动被回调捕获。触发回调时，通过n_clicks数组的非零值定位按钮索引，进而删除对应告警，同时更新存储和重新渲染列表，完美适配任意数量的告警。

内容的提问来源于stack exchange，提问作者Hello