时间戳

首页 > 解决方案 > 如何在单击 Python Dash 的按钮上添加单独的 Html 元素

python - 如何在单击 Python Dash 的按钮上添加单独的 Html 元素

问题描述

我正在尝试使用 Python dash 来实现一个非常简单的场景。在每个按钮上添加相似的元素一个接一个地单击。

下面是代码。

app.layout = {
  html.Button(id='add-element-button', n_clicks=0, children='Add Input Element'),
  html.Div(id="layout")
}

@app.callback(Output('layout', 'children'),
              [Input('add-element-button', 'n_clicks')])
def add_strategy_divison(val):
    if val:
        return html.Div(id=f"heading_element_{val}",
            [
                html.H1(id=f"heading_{val}", children=f"{val} Heading"),
            ]
            )
    else:
        raise PreventUpdate

似乎正在发生的事情不是添加新元素，而是用新的标题元素和新的 id 覆盖第一个标题元素（在第一次点击时成功创建）。

有谁知道会发生什么？谢谢！

标签： pythonpython-3.xplotlyplotly-dashplotly-python

解决方案

您描述的行为非常合理。您返回一个新的 div 元素，这意味着您覆盖了布局元素的 children 属性。这样，您将始终替换现有的孩子。

为此，您需要获取布局元素的当前子元素并将新元素添加到其中。将当前子项作为State对象传递给您的回调。现在将您的元素附加到子元素并返回列表。

@app.callback(
    Output('layout', 'children'),
    [Input('add-element-button', 'n_clicks')],
    [State('layout', 'children')],
)
def add_strategy_divison(val, children):
    if val:
        el = html.Div(id=f"heading_element_{val}", [
            html.H1(id=f"heading_{val}", children=f"{val} Heading"),
        ])
        children.append(el)
        return children
    else:
        raise PreventUpdate

推荐阅读