Callbacks with State

문제

Chained Callback 예제에서, radio 혹은 dropdown 선택을 변경하면 즉시 Output 결과에 반영되어

You selected country= ...  를 보게 된다. 여기서는 submit 버튼을 추가해, 버튼을 클릭했을 때 Output 결과에 반영되도록 수정해 보자

 

코드

from dash import Dash, html, dcc, Input, Output, State

app = Dash()

country_city = {
    'Korea': ['Seoul', 'Pusan', 'Kwangju'],
    'USA': ['New York', 'Los Angeles', 'Chicago']
}

country_list = list(country_city.keys())

app.layout = html.Div([
    dcc.RadioItems(id='country-radio', options=country_list, value=country_list[0]),
    dcc.Dropdown(id='city-dropdown'),
    html.Br(),
    html.Button(id='submit-button', n_clicks=0, children='Submit'),  # n_clicks: 클릭때 마다 1씩 증가
    html.Div(id='selected-div')
])


@app.callback(
    Output('city-dropdown', 'options'),
    Input('country-radio', 'value')
)
def select_country(country):
    return country_city[country]


@app.callback(
    Output('selected-div', 'children'),
    Input('submit-button', 'n_clicks'),
    State('country-radio', 'value'),  # State 로 변경 !
    State('city-dropdown', 'value')  # State 로 변경 !!
)
def show_selected_result(submit_click, country, city):
    return f'You selected country={country}, city={city}'


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

 

참고: https://www.udemy.com/course/python-interactive-dashboards-with-plotly-dash