通过更新其他组件来更改达世币组件的可见性 - 默认'hidden'

Question

我指的是这个问题：通过更新其他组件来更改Dash组件的可见性。

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

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 

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

是否可以在默认情况下隐藏组件，然后取消隐藏？如果不是，为什么我可以覆盖显示样式参数的值，从"block"到"none"，但不能从"none"到"block"？

Answer 1

你绝对可以随心所欲。我认为问题来自于你冲突的默认状态。该组件在加载时是隐藏的，但下拉列表的初始值是"on"，这似乎把事情搞砸了。我不知道为什么它没有正确更新，但将初始样式更改为{'display': 'block'}起到了作用。将初始下拉值更改为"off"无效。

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