python - 使用 Dash，有没有办法在页面的两个部分中重复相同的 id 组件？

Question

我正在使用 DASH 库，我正在尝试使用两个具有相同 id 的下拉过滤器，因此我可以过滤两者中的任何一个，它调用相同的回调，如果我更改一个，另一个也需要更改。但我不知道该怎么做。

谢谢。

标签： pythonplotlyplotly-dash

Answer 1

ID 应该是唯一的。布局中的重复 ID 是不允许的（如果您使用的是最新版本的 Dash）。如果布局中有重复的 id，Dash 会抛出异常。

相反，您应该给两个下拉列表一个唯一的 id，并通过它们的 id 在回调中包含这两个组件。

如果您想在另一个下拉列表值更改时更改一个下拉列表的下拉列表值，您可以使用dash.callback_context：

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Output, Input

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div(
    [
        dcc.Dropdown(
            id="dropdown1",
            options=[
                {"label": "New York City", "value": "NYC"},
                {"label": "Montreal", "value": "MTL"},
                {"label": "San Francisco", "value": "SF"},
            ],
            value="NYC",
        ),
        dcc.Dropdown(
            id="dropdown2",
            options=[
                {"label": "New York City", "value": "NYC"},
                {"label": "Montreal", "value": "MTL"},
                {"label": "San Francisco", "value": "SF"},
            ],
            value="NYC",
        ),
        html.Div(id="output"),
    ]
)


@app.callback(
    Output("dropdown1", "value"),
    Output("dropdown2", "value"),
    Input("dropdown1", "value"),
    Input("dropdown2", "value"),
    prevent_initial_call=True
)
def update_output(dropdown1_value, dropdown2_value):
    ctx = dash.callback_context
    dropdown_id = ctx.triggered[0]['prop_id'].split('.')[0]

    if dropdown_id == "dropdown1":
        dropdown_values = dropdown1_value, dropdown1_value
    elif dropdown_id == "dropdown2":
        dropdown_values = dropdown2_value, dropdown2_value

    return  dropdown_values


if __name__ == "__main__":
    app.run_server()

如果value属性的dropdown1改变触发回调并且value属性的dropdown2值改变，dropdown1反之亦然。

prevent_initial_callback设置为，True所以我不必检查是否dash.callback_context.triggered不是None。您可能希望根据需要更改此设置。