时间戳

首页 > 解决方案 > python dash核心组件动态列表

python - python dash核心组件动态列表

问题描述

我正在使用 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)

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

非常感谢！

标签： pythonplotlyplotly-dash

解决方案

Dash 组件需要id指定 s 才能在回调后保存值。

这个使用 random sstep作为函数生成的例子解决了这个问题：id

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)

推荐阅读