Plotly Dash：下拉组件回调可见性错误

Question

我最近一直在使用 Dash 开发一个应用程序。该应用程序使用了许多控件，例如核心组件中的 Input 和 Dropdown。我想包括的一个功能是一次只有一个 Input 或 Dropdown 可见，而哪一个可见取决于用户选择的内容（即我们使用回调）。这是一个最小的例子：

import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

controls = dbc.Card(
    [
        dbc.FormGroup(
            [
               dbc.Label("Choose input or dropdown"),
               dbc.RadioItems(
                   id='radio',
                   options=[
                       {'label': 'input', 'value': 'input'},
                       {'label': 'dropdown', 'value': 'dropdown'},
                   ],
                   value='input',
               ),
            ]
        ),
        dbc.FormGroup(
            [
                dbc.Label("Input", id='input-label'),
                dbc.Input(
                    id='input',
                    type='number',
                    min=1, max=100, step=1, value=5
                ),
            ]
        ),
        dbc.FormGroup(
            [
                dbc.Label("Dropdown", id='dropdown-label'),
                dcc.Dropdown(
                    id='dropdown',
                    options=[
                        {'label': 'Hello'+str(i), 'value': 'Hello'+str(i)} for i in range(100)
                    ],
                    multi=True,
                    placeholder='Say Hello',
                ),
            ]
        ),
    ],
    body=True,
    color='light',
)

app.layout = dbc.Container(
    [
        dbc.Row(
            [
                dbc.Col(controls, md=4)
            ],
            align='center',
        ),
    ],
    fluid=True,
)

@app.callback(
    [Output('input', 'style'),
     Output('input-label', 'style'),
     Output('dropdown', 'style'),
     Output('dropdown-label', 'style')],
    [Input('radio', 'value')])
def visibility(selected_type):
    if selected_type == 'input':
        return {'display': 'block'}, {'display': 'block'}, {'display': 'none'}, {'display': 'none'}
    else:
        return {'display': 'none'}, {'display': 'none'}, {'display': 'block'}, {'display': 'block'}


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

但是，使用回调会破坏下拉菜单的功能。例如，尝试在下拉列表中包含 10 个左右的“Hello's”。现在，如果您在代码中注释掉回调，功能就会恢复：添加许多“Hello's”会导致下拉框按预期展开以存储它们。

有人可以解释为什么我的回调会导致这种行为吗？

Answer 1

问题是您在回调中直接覆盖了输入组件和下拉组件的样式。为了防止这个问题，您可以为其容器分配一个 id，然后在回调中更改容器的样式。使用这种方法，输入组件和下拉组件都将保留它们的默认行为。

import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

controls = dbc.Card(
    [
        dbc.FormGroup(
            [
               dbc.Label('Choose input or dropdown'),
               dbc.RadioItems(
                   id='radio',
                   options=[
                       {'label': 'input', 'value': 'input'},
                       {'label': 'dropdown', 'value': 'dropdown'},
                   ],
                   value='input',
               ),
            ]
        ),
        dbc.FormGroup(id='input-form', children=
            [
                dbc.Label('Input', id='input-label'),
                dbc.Input(
                    id='input',
                    type='number',
                    min=1, max=100, step=1, value=5
                ),
            ]
        ),
        dbc.FormGroup(id='dropdown-form', children=
            [
                dbc.Label('Dropdown', id='dropdown-label'),
                dcc.Dropdown(
                    id='dropdown',
                    options=[
                        {'label': 'Hello'+str(i), 'value': 'Hello'+str(i)} for i in range(100)
                    ],
                    multi=True,
                    placeholder='Say Hello',
                ),
            ]
        ),
    ],
    body=True,
    color='light',
)

app.layout = dbc.Container(
    [
        dbc.Row(
            [
                dbc.Col(controls, md=4)
            ],
            align='center',
        ),
    ],
    fluid=True,
)

@app.callback([Output('input-form', 'style'), Output('dropdown-form', 'style')],
    [Input('radio', 'value')])
def visibility(selected_type):

    if selected_type == 'input':

        return {'display': 'block'}, {'display': 'none'}

    else:

        return {'display': 'none'}, {'display': 'block'}

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