通过更新其他组件来更改 Dash 组件的可见性 - 默认为“隐藏”答案

【问题标题】：Changing visibility of a Dash Component by updating other Component - 'hidden' as default通过更新其他组件来更改 Dash 组件的可见性 - 默认为“隐藏”
【发布时间】：2020-11-23 12:40:36
【问题描述】：

我参考这个问题：Changing visibility of a Dash Component by updating other Component。

accepted answer 显示了在下拉菜单中选择相应值后如何隐藏组件。我想取消隐藏默认隐藏的组件。我尝试了接受答案中的代码：

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

app = dash.Dash('example')

app.layout = html.Div([
    dcc.Dropdown(
        id='dropdown-to-show_or_hide-element',
        options=[
            {'label': 'Show element', 'value': 'on'},
            {'label': 'Hide element', 'value': 'off'}
        ],
        value='on'
    ),

    # Create Div to place a conditionally visible element inside
    html.Div([
        # Create element to hide/show, in this case an 'Input Component'
        dcc.Input(
            id='element-to-hide',
            placeholder='something',
            value='Can you see me?',
            )
        ], style={'display': 'none'} # <-- This is the line that will be changed by the dropdown callback
        )
    ])

@app.callback(
    Output(component_id='element-to-hide', component_property='style'),
    [Input(component_id='dropdown-to-show_or_hide-element', component_property='value')])
def show_hide_element(visibility_state):
    if visibility_state == 'on':
        print('on')
        return {'display': 'block'}
    if visibility_state == 'off':
        print('off')
        return {'display': 'none'}

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

我唯一改变的就是这行代码

], style={'display': 'block'} # <-- This is the line that will be changed by the dropdown

到

], style={'display': 'none'} # <-- This is the line that will be changed by the dropdown

但是当我运行应用程序时，输入组件根本不显示。即使我将下拉菜单切换为“打开”。

是否可以默认隐藏组件并在以后取消隐藏它们？如果不是，为什么我可以将 display-style 参数中的值从“block”覆盖到“none”，而不是从“none”到“block”？

【问题讨论】：

标签： python plotly show-hide plotly-dash

【解决方案1】：

你完全可以做你想做的事。我认为问题出在您相互冲突的默认状态。该组件在加载时隐藏，但下拉列表的初始值为"on"，这似乎把事情搞砸了。我不确定为什么它没有正确更新，但是将初始样式更改为 {'display': 'block'} 有效。将初始下拉值更改为 "off" 无效。

默认情况下应该可以隐藏一些东西，尽管我不确定为什么它在这种情况下不起作用。

【讨论】：