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

debugcn 发表于 Dev

jsonbourne

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

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

李先生

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

为了使它按您希望的方式工作，您需要获取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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。