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

Question

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

下面是代码。

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 覆盖第一个标题元素（第一次点击时成功创建）。

有人知道会发生什么吗？谢谢！

Answer 1

您描述的行为非常有道理。您 return 一个新的 div-element，这意味着您覆盖了 layout 元素的 children 属性。这样您将始终替换现有的 children。

要使其按您希望的方式工作，您需要获取 layout 元素的当前 children 并将新元素添加到其中。将当前 children 作为 State object 传递给您的回调。现在将您的元素附加到 children 和 return 列表中。

@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

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

How to add separate Html elements on a button click on Python Dash

python

python-3.x

plotly

plotly-dash

plotly-python