Python Dash中如何根据按钮点击修改回调输出？

我正在使用Python Dash开发项目，现有一个每1000毫秒更新一次的回调，用于输出回调运行次数这类虚拟值。需求是点击按钮时，改变该回调的输出内容。

我找到了两种实现方案：

• 使用两个回调
• 使用隐藏Div

方案一：使用两个回调 #

# 使用两个回调
from dash import dash, dcc, html, Input, Output, State
app = dash.Dash(__name__)

app.layout = html.Div(
    [
        dcc.Interval(id="interval", interval=1000),  
        html.Button("点击", id="button"), 
        html.Div(id="output")  
    ]
)
@app.callback(
    Output("output", "children"),
    [Input("interval", "n_intervals")],
    [State("button", "n_clicks")]
)
def update_output(n_intervals, n_clicks):
    if n_clicks == 0:
        return f"间隔次数: {n_intervals} - 按钮未点击"
    if n_clicks != 0:
        return f"间隔次数: {n_intervals} - 按钮已点击"

@app.callback(
    Output("button", "n_clicks"),
    [Input("output", "children")]
)
def reset_button(n):
    return 0

if __name__ == "__main__":
    app.run_server(debug=True)

方案二：使用隐藏Div #

# 使用隐藏Div
from dash import dash, dcc, html, Input, Output, State, callback_context

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        dcc.Interval(id="interval", interval=1000),  
        html.Button("点击", id="button"),  
        html.Div(id="output"),  
        html.Div(id="hidden-div", style={"display": "none"}, children="0")  
    ]
)

@app.callback(
    [Output("output", "children"), Output("hidden-div", "children")],
    [Input("interval", "n_intervals"), Input("button", "n_clicks")],
    [State("hidden-div", "children")] 
)
def update_output(n_intervals, n_clicks, hidden_clicks):
    ctx = callback_context
    if ctx.triggered[0]["prop_id"] == "button.n_clicks":
        return f"间隔次数: {n_intervals} - 按钮已点击", hidden_clicks
    else:
        return f"间隔次数: {n_intervals} - 按钮未点击", hidden_clicks

if __name__ == "__main__":
    app.run_server(debug=True)

请问哪种方案是最佳解决方案？

编辑补充：感谢AndreVale69的解答，以下优化后的代码运行效果良好：

from dash import dash, dcc, html, Input, Output, ctx

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        dcc.Interval(id="interval", interval=1000),  
        html.Button("点击", id="button"),  
        html.Div(id="output"),  
    ]
)

@app.callback(
    Output("output", "children"),
    [Input("interval", "n_intervals"), 
     Input("button", "n_clicks")]
)
def update_output(n_intervals, n_clicks):
    if (ctx.triggered_id == 'interval' or n_intervals == None):
        return f"间隔次数: {n_intervals} - 按钮未点击"
    return f"间隔次数: {n_intervals} - 按钮已点击"

if __name__ == "__main__":
    app.run_server(debug=True)

最佳方案分析 #

对比两种原始方案，方案二（隐藏Div）比方案一更合理，但最终的优化版代码才是最优解：

1. 方案一的问题：

   • 两个回调形成循环依赖（output更新触发按钮n_clicks重置，重置后又触发output更新），逻辑冗余且易引发不必要的回调触发，影响性能。
   • 强行重置按钮点击次数不符合交互直觉，丢失了用户点击的状态记录。

2. 方案二的优势：

   • 单个回调集中处理间隔器和按钮两种触发源，逻辑更统一。
   • 通过隐藏Div存储状态，避免了循环依赖，但额外的DOM元素略显冗余。

3. 优化版代码的核心优势：

   • 无需额外DOM元素或多回调，仅用单个回调+ctx.triggered_id判断触发源，逻辑简洁高效。
   • 直接通过触发源区分输出内容，完全匹配需求，无冗余逻辑，是最简洁且性能最优的实现方式。

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