防止Dash下拉菜单在多页应用程序中重置为默认值 [英] Preventing a Dash dropdown menu from reseting to default value in multi-page app

问题描述

我目前正在尝试在Python的Dash中构建多页应用程序（对教程中的某些内容进行了一些更改），并且我想知道您如何防止在菜单中使用下拉菜单。

I am currently trying out building a multi-page app in Python's Dash (changing a bit some of the materials from the tutorials) and I am wondering how you are able to prevent a dropdown menu in e.g. the first page from going back to the default value when you are returning to that page.

app.layout = html.Div([

    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content'),
])

index_page = html.Div([
    html.Br(),
    dcc.Link('Go to Page 1', href='/page-1'),
    html.Br(),
    dcc.Link('Go to Page 2', href='/page-2'),
])

page_1_layout = html.Div([
    dcc.Dropdown(
        id='page-1-dropdown',
        options=[{'label': i, 'value': i} for i in ['LA', 'NYC', 'MTL']],
        value='LA'
    ),
    html.Div(id='page-1-content'),
    html.Br(),
    dcc.Link('Go to Page 2', href='/page-2'),
    html.Br(),
    dcc.Link('Go back to home', href='/'),

])


page_2_layout = html.Div([
    html.Div(id='page-2-content'),
    html.Br(),
    dcc.Link('Go to Page 1', href='/page-1'),
    html.Br(),
    dcc.Link('Go back to home', href='/')
])

@app.callback(Output('page-1-content', 'children'),
              [Input('page-1-dropdown', 'value')])
def page_1_dropdown(value):
    return html.Div([
        html.Div(['You have selected "{}"'.format(value)]),#
    ])

# Update the index
@app.callback(Output('page-content', 'children'),
              [Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/page-1':
        return page_1_layout
    elif pathname == '/page-2':
        return page_2_layout
    else:
        return index_page
    # You could also return a 404 "URL not found" page here

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

在上面的示例中，当我选择例如从下拉菜单中选择 NYC，然后再移至第2页，然后再返回到pg 1，则下拉选择已回到默认的 LA。

In the example above, when I select e.g. 'NYC' from the dropdown menu, and then move to page 2 before moving back in pg 1, the dropdown selection has gone back to the default 'LA'.

似乎很简单，可以防止这种情况发生，但是我还没有找到一种方法。

It seems to be pretty straight-forward to prevent that, but I have not found a way to do it yet.

预先感谢！

推荐答案

您将需要使用状态为此。因此，请记录下拉菜单的事件状态，因此如果单击了该状态，请标记该状态。在您的 page_1_dropdown 回调中，检查状态并更新为所选值。以下内容：

You will need to use State for this. So record the event state for the drop down, so if it was clicked mark the state. And in your callback for page_1_dropdown check for the state and update to selected value. Something on the lines of :

@app.callback(Output('page-1-dropdown', 'value'),
          [Input('page1_link', 'n_clicks')],
          [State('page-1-dropdown', 'value')])
def drop_down(n_clicks, input1):
    if (n_clicks) >=1 :
        return(input1)

这篇关于防止Dash下拉菜单在多页应用程序中重置为默认值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！