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

Posted 2023-03-22

【中文标题】Plotly Dash：下拉组件回调可见性错误

【英文标题】：Plotly Dash: Dropdown component callback visibility bug

【发布时间】：2020-07-30 20:41:44

【问题描述】：

我最近一直在使用 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”会导致下拉框按预期展开以存储它们。

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

【参考方案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)