Как добавить отдельные элементы Html по нажатию кнопки Python тире - PullRequest
Новая
       9

Как добавить отдельные элементы Html по нажатию кнопки Python тире

1 голос
/ 14 апреля 2020

Очень тривиальный сценарий, которого я пытаюсь достичь, используя Python da sh. Добавляя похожие элементы на каждую кнопку, нажимайте один за другим.

Ниже приведен код. 

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

То, что происходит, вместо добавления новых элементов, просто перезаписывает первый элемент заголовка (который успешно создается при первом щелчке) с помощью новый вместе с новым идентификатором.

Кто-нибудь знает, что может происходить? Спасибо!

1 Ответ

1 голос
/ 14 апреля 2020

Поведение, которое вы описали, имеет смысл. Вы возвращаете новый элемент div, что означает, что вы перезаписываете дочерний атрибут элемента layout . Таким образом, вы всегда будете заменять существующих детей.

Чтобы это работало так, как вам нужно, вам нужно получить текущих дочерних элементов вашего элемента 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
...