javascript - Dash 中的多页面应用程序 - 其他页面无法识别的下拉值

Question

当我移动到另一个页面时，下拉值不会被拉入并显示。

有人可以帮忙吗？

我已尝试遵循在线破折号文档 (https://dash.plot.ly/urls) 和这篇文章 (Multi-Page Dash Application)，但没有成功。

import flask
import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import dash_auth


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

app.config['suppress_callback_exceptions']=True

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


index_page = html.Div([
dcc.Link('Go to Questionnaire', href='/questionnaire'),
])


intro_page_layout = html.Div([
    dcc.Store(id='memory-ouput', storage_type='memory'),
    html.Div([
                html.Div(

                    html.H6("""Select your current industry""",
                            style={'margin-right': '2em'})
            ),

            dcc.Dropdown(
                id='business_area_dropdown',
                options=[
                    {'label': 'Academia', 'value': 'academia'},
                    {'label': 'Energy', 'value': 'energy'},
                    {'label': 'Research', 'value': 'research'}
                ],
                placeholder="Select Business Area",
                style=dict(
                    width='40%',
                    verticalAlign="middle"
                )
            )],
        style=dict(display='flex')
    ),

    html.Div([
            html.Div(
                    html.H6("""Are you happy where you are?""",
                            style={'margin-right': '2em'})
            ),

            dcc.Dropdown(
                id='search_preference',
                options=[
                    {'label': 'Yes', 'value': 'yes'},
                    {'label': 'No', 'value': 'no'}
                ],
                placeholder="Select Answer",
                style=dict(
                    width='40%',
                    display='inline-block',
                    verticalAlign="middle"
                )
            )],

        style=dict(display='flex')
    ), 

    dcc.Link(
    html.Button('Submit', type='submit', id='submit-button', style={'margin-bottom': '5em', 'width': '110px', 'height':'50px', 'padding': '10px', 'font-weight':'bold'}),
    href='/summary')

    ])


summary_page_layout = html.Div([
    html.H1('Summary Page'),
    html.Div(id='results-page-content')
    ])


def serve_layout():
    if flask.has_request_context():
        return url_bar_and_content_div
    return html.Div([
        url_bar_and_content_div,
        index_page,
        intro_page_layout,
        summary_page_layout
        ])


app.layout = serve_layout


@app.callback(Output('memory-output', 'data'), [Input('submit-button', 'n_clicks')], [State('search_preference', 'value'), State('business_area_dropdown', 'value')])
def on_click(n_clicks, input1, input2):
    if (n_clicks < 1 or n_clicks is None) and input1 is not None and input2 is not None:
        raise PreventUpdate

    return data

@app.callback(Output('results-page-content', 'children'), [Input('memory-output', 'data')], [State('search_preference', 'value'), State('business_area_dropdown', 'value')])
def on_display(data, input1, input2):
    if data is None:
        raise PreventUpdate
    return html.H3('Results are ' + input1 + ' and ' + input2)


@app.callback(Output('page-content', 'children'),[Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/questionnaire':
        return intro_page_layout
    elif pathname == '/summary':
        return summary_page_layout
    else:
        return index_page

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

在摘要页面上，我应该有用户从问卷页面选择的值。奇怪的是，这些值没有显示在摘要页面上。

任何帮助或指示将不胜感激。

提前致谢。

Answer 1

您需要将下拉列表值存储在磁盘、flask.session 对象或 dcc.Store 组件中。当您切换页面时，Dash 不会保留来自其他页面的输入值。