【数据科学系列】基于Python的Web应用框架Dash-Dash 状态

Dash 状态

基本的回调函数

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    dcc.Input(id='input-1', type='text', value=u'上海'),
    dcc.Input(id='input-2', type='text', value=u'北京'),
    html.Div(id='output')
])


@app.callback(Output('output', 'children'),
              [Input('input-1', 'value'),
               Input('input-2', 'value')])
def update_output(input1, input2):
    return u'Input 1 is "{}" and Input 2 is "{}"'.format(input1, input2)


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

输入1为“北京”，输入2为“上海”
在此示例中，只要dash.dependencies.Input更改描述了任何属性，就会触发回调函数。通过在上面的输入中输入数据来亲自体会。

dash.dependencies.State允许用户传递额外的值而不触发回调。以下是与上面相同的例子，但 其中dcc.Input为 dash.dependencies.State和按钮为 dash.dependencies.Input。

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    dcc.Input(id='input-1-state', type='text', value=u'北京'),
    dcc.Input(id='input-2-state', type='text', value=u'上海'),
    html.Button(id='submit-button', n_clicks=0, children='Submit'),
    html.Div(id='output-state')
])


@app.callback(Output('output-state', 'children'),
              [Input('submit-button', 'n_clicks')],
              [State('input-1-state', 'value'),
               State('input-2-state', 'value')])
def update_output(n_clicks, input1, input2):
    return u'''
        The Button has been pressed {} times,
        Input 1 is "{}",
        and Input 2 is "{}"
    '''.format(n_clicks, input1, input2)


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

在此示例中，更改dcc.Input框中的文本不会触发回调，但单击按钮会触发回调。即使dcc.Input它们不触发回调函数本身，dcc.Input的当前值仍会传递到回调中。

注意：通过侦听组件的n_clicks属性来触发回调 html.Button。n_clicks是每次单击组件时都会增加的属性。它可以在dash_html_components库中的每个组件中使用 。

---