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

Question

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

谢谢。

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()

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

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