如何使用未明确定义为输入的输入/状态使用带有回调的 Dash 调用函数

Question

我正在使用 Dash 从 JSON 中读取数据，并根据它摄取的数据创建多个输入字段，并将结果可视化。我想要一个函数，当通过按钮提交表单时创建一个 JSON，将所有输入字段的值作为状态。

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import plotly.graph_objects as go
import json

app=dash.Dash
output = []
in2 = []


for (x,y) in data.items():
    in2.append(State(x, 'value'))
    output.append(html.Label(y['constraint_name']))
    if y['constraint_type']=='fs':
        output.append(dcc.RadioItems(id=x,
                                    options=[
                                        {"label" : "On", "value" : "On"},
                                        {"label" : "Off", "value" : "Off"}
                                    ],
                                    value = "On"
                                    ),)
    elif y['constraint_type']=='dur':
        output.extend((html.Br(),dcc.Input(id=x,
                                        type='number',
                                           value=10,
                                        min=0
                               ), html.Label("People ")))
    output.extend((html.Br(), html.Br()))

output.append(html.Button('Submit', id='submit'))
output.append(html.Div(id="div2"))

app.layout = html.Div(output, style={'width': '44%', 'display': 'inline-block', 'vertical-align': 'top'})

@app.callback(
    Output(component_id='div2', component_property='children'),
    in2
)
def update_output_div(input_value):
    teststring1 = ""
    for val in input_value:
        teststring1 += val

    return 'You\'ve entered "{}"'.format(teststring1)

应用程序在上述状态下不会以回调方式运行，但如果它只有Input('1','value')，它将获取列表in2。我怎样才能让它工作？

Answer 1

这里的关键是将您的状态作为第三个参数传递给列表。规则是输出作为第一个参数，输入作为第二个参数，状态作为第三个参数。输入和状态都必须在列表中传递。此外，您必须确保对于每个输入和状态，您的回调函数都必须接受一个参数。因此，在您的情况下，您必须执行以下操作：

@app2.callback(
    Output(component_id='div2', component_property='children'),
    [Input('1', 'value')],
    [State('2', 'value')]
)
def update_output_div(input_value1, input_value2):
    ....

请记住，如果您将第二个输入值作为状态，它不会在更改时触发回调函数。为了让它在更改时触发回调，必须将其声明为输入并与其他输入一起放入列表中。