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

Question

我正在尝试使用 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 覆盖第一个标题元素(第一次点击时成功创建)。

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

Answer 1

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

要使其按照您希望的方式工作，您需要获取 layout 元素的当前子元素并将新元素添加到其中。将当前子级作为 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