2017-08-17 73 views
1

我剛開始用破折號。以here爲例。我想在儀表應用轉換下面如何使用按鈕觸發回叫更新?

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() 

要更新,當用戶按下一個按鈕,而不是當的輸入字段的值更改。我該如何做到這一點?

+0

這原來是重複[這](https://開頭計算器.com/questions/45579844/dash-core-component-for-basic-button-click-event)問題。 – user25064

回答

1

這是一個類似的問題,這個post。在最新的dash_html_components中有一個按鈕可用的點擊事件,但它似乎尚未完整記錄。創建者chriddyp具有statedEvent對象可能不是未來驗證的,但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')更新時觸發。

因此,對於你的榜樣,我添加了一個按鈕和飼餵狀態對象現有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()