Dash Python 教程(7):输入状态

某些时候,你需要读取用户输入的值,当不希望用户一按键就读取,而是需要等用户输入所有信息后,再读取用户输入。比如之前我们使用Input,Output的一个例子:

app.layout = html.Div(
    [
        dcc.Input(id="input-1", type="text", value="Montréal"),
        dcc.Input(id="input-2", type="text", value="Canada"),
        html.Div(id="number-output"),
    ]
)


@app.callback(
    Output("number-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)

 

用户在两个输入框输入时,下面的提示都会改变。
针对这种情况,dash.dependencies.State可以把UI组件当前的状态属性作为额外参数传给回调函数,而不会触发回调函数,比如我们把什么两个Input修改成State,添加一个按钮作为Input

app.layout = html.Div([
    dcc.Input(id='input-1-state', type='text', value='Montréal'),
    dcc.Input(id='input-2-state', type='text', value='Canada'),
    html.Button(id='submit-button-state', n_clicks=0, children='Submit'),
    html.Div(id='output-state')
])


@app.callback(Output('output-state', 'children'),
              [Input('submit-button-state', '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)

 

使用State,用户输入城市和国家时Dash不会调用回调函数,而用户点击按钮时才过调用函数,但Input1和Inpupt2的当前值会作为参数传给回调函数。