如何用Python中的Dash回调连接HTML元素

Question

我在代码中同时使用html元素和dash引导程序组件，不知道是否可以在回调中将html组件与dash组件连接起来。例如，我有一个短划线下拉菜单，希望根据下拉菜单的输入更新html文本。

#dropdown
html.Div =(
[
dcc.Dropdown(
id="dropdown",
options=[
{"label": "option1", "value": "option1"},
{"label": "option2", "value": "option2"},
],
multi=True,
)
]
)
# HTML Components
html.Div =(
[
html.H2("The selected option is")
html.P(id="text-holder", children =["text"])
]
)

@app.callback(
Output("text-holder", "children"),
Input("dropdown", "value)
)
def fill_text(value):
return value

一旦用户从下拉菜单中选择了一个值，我希望所选的值显示在html创建的文本行上。P.例如；选项1"；则出现在HTML部分上的文本也应该是"；option1"；。

如果我运行当前脚本，我不会收到任何错误消息，但html部分根本不会更新。我认为回调是不正确的，但不确定如何修复。

Answer 1

使用html.Div =( ...会更改html.Div的值。正确的布局非常重要。

也许这就是你想要的：

from dash import dcc, html, Dash, Output, Input
app = Dash(__name__)
app.layout = html.Div(
[
# dropdown
html.Div(
[
dcc.Dropdown(
id="dropdown",
options=[
{"label": f"option{idx}", "value": f"option{idx}"}
for idx in range(1, 5)
],
multi=True,
value="not specified",
)
]
),
# HTML Components
html.Div([html.H2("The selected option is"), html.P(id="text-holder")]),
]
)

@app.callback(Output("text-holder", "children"), Input("dropdown", "value"))
def fill_text(value):
return value

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