Dash框架下切换回标签页后如何保留原有内容状态

问题描述 #

在Dash应用中配置多标签页后，在第一个标签页操作下拉菜单并修改选择后，切换到其他标签页再返回，之前的选择和组件状态会重置为初始值，无法保留操作结果。

问题原因 #

当前实现里，每次切换标签页时，render_content回调都会返回tab1或tab2的全新实例——原来的组件会被从DOM中移除，新实例使用初始配置渲染，导致状态无法保留。

解决方案 #

将所有标签内容预先加载到布局中，通过CSS样式控制显示与隐藏，这样组件始终存在于DOM中，状态会被浏览器自动保存。修改后的代码如下：

import dash
from dash import html, dcc
from dash.dependencies import Input, Output

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets, suppress_callback_exceptions=True)

myList = ['A', 'B']
myDict = {'A': [1,2,3],'B': [4,5,6] }

# 预先定义所有标签内容，初始时只显示tab1
tab1 = html.Div(id='tab-1-content', children=[
    html.H3('Tab content 1'),
    dcc.Dropdown(
        id='first-dropdown-tab1',
        options=[{'label': l, 'value': l} for l in myList],
        value='A'
    ),
    dcc.Dropdown(
        id='second-dropdown-tab1',
        options=[{'label': i, 'value': i} for i in myDict['A']],
        value=1
    ),
], style={'display': 'block'})

tab2 = html.Div(id='tab-2-content', children=[
    html.H3('Tab content 2'),
    dcc.Dropdown(
        id='first-dropdown-tab2',
        options=[{'label': l, 'value': l} for l in myList],
        value='A'
    ),
    dcc.Dropdown(
        id='second-dropdown-tab2',
        options=[{'label': i, 'value': i} for i in myDict['A']],
        value=1
    ),
], style={'display': 'none'})

app.layout = html.Div([
    html.H1('Dash Tabs component demo'),
    dcc.Tabs(id="tabs-example", value='tab-1', children=[
        dcc.Tab(label='Tab One', value='tab-1'),
        dcc.Tab(label='Tab Two', value='tab-2'),
    ]),
    # 直接包含所有标签内容，不再通过回调动态返回
    tab1,
    tab2
])

@app.callback(
    [Output('tab-1-content', 'style'),
     Output('tab-2-content', 'style')],
    [Input('tabs-example', 'value')]
)
def toggle_tab_content(selected_tab):
    if selected_tab == 'tab-1':
        return {'display': 'block'}, {'display': 'none'}
    elif selected_tab == 'tab-2':
        return {'display': 'none'}, {'display': 'block'}

@app.callback(
    [Output('second-dropdown-tab1', 'options'),
     Output('second-dropdown-tab1', 'value')],
    [Input('first-dropdown-tab1', 'value')]
)
def update_dropdown_tab1(value):
    return [{'label': i, 'value': i} for i in myDict[value]], myDict[value][0]

@app.callback(
    [Output('second-dropdown-tab2', 'options'),
     Output('second-dropdown-tab2', 'value')],
    [Input('first-dropdown-tab2', 'value')]
)
def update_dropdown_tab2(value):
    return [{'label': i, 'value': i} for i in myDict[value]], myDict[value][0]

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

说明 #

修改后的代码不再通过回调动态生成标签内容，而是将所有标签内容预先放在布局中，仅通过display样式控制显示或隐藏。这样组件始终存在于DOM树中，用户的操作状态会被浏览器保留，切换标签页后再返回就能看到之前的选择结果。

内容的提问来源于stack exchange，提问作者sergey_208