如何使用按钮触发回调更新？

Question

我刚刚开始使用 dash。以 here 为例。我想转换下面的 dash 应用程序

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div([
    dcc.Input(id='my-id', value='initial value', type="text"),
    html.Div(id='my-div')
])

@app.callback(
    Output(component_id='my-div', component_property='children'),
    [Input(component_id='my-id', component_property='value')]
)
def update_output_div(input_value):
    return 'You\'ve entered "{}"'.format(input_value)

if __name__ == '__main__':
    app.run_server()

在用户按下按钮时更新，而不是在输入字段的值更改时更新。我该如何做到这一点？

Answer 1

这是一个与此 post. There is a click event available for a button in the latest dash_html_components, but it doesn't appear to be fully documented yet. The creator, chriddyp, has stated 类似的问题，即 Event 对象可能不会面向未来，但 State 应该是。

使用 State 如：

@app.callback(
    Output('output', 'children'),
    [Input('button-2', 'n_clicks')],
    state=[State('input-1', 'value'),
     State('input-2', 'value'),
     State('slider-1', 'value')])

您可以使用值作为输入，而无需在值发生变化时启动回调。回调仅在 Input('button', 'n_clicks') 更新时触发。

因此，对于您的示例，我添加了一个按钮并向 State 对象提供了您现有的 html.Input 值：

import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div([
    dcc.Input(id='my-id', value='initial value', type="text"),
    html.Button('Click Me', id='button'),
    html.Div(id='my-div')
])

@app.callback(
    Output(component_id='my-div', component_property='children'),
    [Input('button', 'n_clicks')],
    state=[State(component_id='my-id', component_property='value')]
)
def update_output_div(n_clicks, input_value):
    return 'You\'ve entered "{}" and clicked {} times'.format(input_value, n_clicks)

if __name__ == '__main__':
    app.run_server()

Answer 2

对于 first-time 负载，n_clicks 可能是 None。

因此，如果您不想在加载应用程序时不显示任何内容，而只在单击按钮时显示结果，您也可以检查一下。

if n_clicks is not None:
        if n_clicks>0:
            <your code>

如何使用按钮触发回调更新？

How to use a button to trigger callback updates?

python

plotly-dash