如何在Plotly Dash中通过按钮点击事件捕获输入框文本

AI 小北

2026-7-23

修改Plotly Dash回调为按钮点击触发

要实现点击按钮才触发后台逻辑，需要做两个核心修改：添加触发按钮，调整回调的触发源与数据获取方式：

1. 布局中添加按钮组件

在输入框所在的html.Div里新增一个按钮，给它设置唯一ID以便回调识别：

app.layout = html.Div([
    html.Div(
        [
            html.H1('K7'),
            dcc.Graph(id="graph", style={'width': '100vw', 'height': '70vh'}),
        ]),
    html.Div(
        [
            dcc.Input(
                id="input_symbol",
                value="TJX",
                type="text",
                placeholder="SYMBOL",
                style={'width': '10vw', 'height': '3vh'}
            ),
            dcc.Input(
                id="input_resolution",
                value="D",
                type="text",
                placeholder="RESOLUTION",
                style={'width': '10vw', 'height': '3vh'}
            ),
            # 新增触发按钮
            html.Button('提交', id='submit_btn', style={'marginLeft': '10px'})
        ])
])

2. 调整回调逻辑

把原来输入框的Input换成按钮的n_clicks（点击次数）作为触发源，同时用State获取输入框的内容——State只会读取值但不会触发回调，只有按钮点击时才会触发：

@app.callback(
    Output("graph", "figure"),
    # 按钮点击作为触发条件
    Input('submit_btn', 'n_clicks'),
    # 用State获取输入框的值，不会触发回调
    State('input_symbol', 'value'),
    State('input_resolution', 'value'),
    # 防止应用加载时自动触发回调
    prevent_initial_call=True
)
def update_graph(n_clicks, symbol, resolution):
    # 这里替换为你的后台业务逻辑，比如根据参数生成图表
    return {
        'data': [],
        'layout': {'title': f'当前参数：{symbol} {resolution}'}
    }