python dash核心组件动态列表答案

【问题标题】：Dynamic list of python dash core componentspython dash核心组件动态列表
【发布时间】：2019-03-25 03:00:10
【问题描述】：

我正在使用 python dash 并希望创建一个菜单/表单列表，可以通过单击按钮来动态扩展和缩小。添加新表单/菜单应向页面添加另一个相同的表单（表单/菜单列表）。

以下代码允许添加/删除包含多个 dash 核心组件的附加 div，但是，每当我在其中一个下拉列表中选择一个选项或在其中一个输入字段中输入任何内容时，我选择或输入的内容就会消失再次。

import dash
import dash_core_components as dcc
import dash_html_components as html

step = html.Div(
        children=[
            "Menu:",
            dcc.Dropdown(options=[{'label': v, 'value': v} for v in ['option1', 'option2', 'option3']]),
            dcc.Input(placeholder="Enter a value ...", type='text', value='')
        ])

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

div_list = [step]

app.layout = html.Div(
    children=[
        html.H1(children='Hello Dash'),
        html.Div(children=div_list, id='step_list'),
        html.Button('Add Step', id='add_step_button', n_clicks_timestamp='0'),
        html.Button('Remove Step', id='remove_step_button', n_clicks_timestamp='0')])


@app.callback(
    dash.dependencies.Output('step_list', 'children'),
    [dash.dependencies.Input('add_step_button', 'n_clicks_timestamp'),
     dash.dependencies.Input('remove_step_button', 'n_clicks_timestamp')],
    [dash.dependencies.State('step_list', 'children')])
def add_step(add_ts, remove_ts, div_list):
    add_ts = int(add_ts)
    remove_ts = int(remove_ts)
    if add_ts > 0 and add_ts > remove_ts:
        div_list += [step]
    if len(div_list) > 1 and remove_ts > add_ts:
        div_list = div_list[:-1]
    return div_list


if __name__ == '__main__':
    app.run_server(debug=True)

谁能向我解释我做错了什么？

非常感谢！

【问题讨论】：

标签： python plotly plotly-dash

【解决方案1】：

Dash 组件需要指定ids 以便在回调后保存值。

这个使用随机ids生成step作为函数的例子解决了这个问题：

import dash
import dash_core_components as dcc
import dash_html_components as html
import numpy as np

def step():
     return html.Div(
        children=[
            "Menu:",
            dcc.Dropdown(options=[{'label': v, 'value': v} for v in ['option1', 'option2', 'option3']],id=str(np.random.randn())),
            dcc.Input(placeholder="Enter a value ...",id=str(np.random.randn()))
        ])

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(
    children=[
        html.H1(children='Hello Dash'),
        html.Div(children=[step()], id='step_list'),
        html.Button('Add Step', id='add_step_button', n_clicks_timestamp=0),
        html.Button('Remove Step', id='remove_step_button', n_clicks_timestamp=0)])

@app.callback(
    dash.dependencies.Output('step_list', 'children'),
    [dash.dependencies.Input('add_step_button', 'n_clicks_timestamp'),
     dash.dependencies.Input('remove_step_button', 'n_clicks_timestamp')],
    [dash.dependencies.State('step_list', 'children')])
def add_step(add_ts, remove_ts, div_list):
    add_ts = int(add_ts)
    remove_ts = int(remove_ts)
    if add_ts > 0 and add_ts > remove_ts:
        div_list += [step()]
    if len(div_list) > 1 and remove_ts > add_ts:
        div_list = div_list[:-1]
    return div_list

if __name__ == '__main__':
    app.run_server(debug=True)

【讨论】：