时间戳

首页 > 解决方案 > 如何在 Python 的 Dash 包中创建两个可以修改卡片体的按钮，每个按钮都有自己的方式？

python - 如何在 Python 的 Dash 包中创建两个可以修改卡片体的按钮，每个按钮都有自己的方式？

问题描述

我的 app.callback 函数有问题，我希望通过按下 top_masse 按钮​​来更改 cardBody 的内部，当我按下 top_masse 按钮​​时，我还以另一种方式更改 cardBody。问题是在我的代码中，在第一个按钮而不是第二个按钮上进行了更改，我不明白问题出在哪里，但它考虑了点击次数。这是简化版本的代码：

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
import dash_table as dt

from dash.dependencies import Input, Output, State


app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

tarif_jumb = dbc.Jumbotron([
        html.H2("Tarification", className="display-3"),
        html.Hr(className="my-2",),
        html.P(),
        dbc.Button("Tarif en masse", color="primary", className="mr-3", id="top_masse"),
        dbc.Button("Tarif parc", color="danger", className="mr-3", id="top_parc")
        ,])
    
card_top_tarif = dbc.Card(
            dbc.CardBody([
                    tarif_jumb
                    ,])
            , className="mt-3"
            ,)

tab_top_tarif = dbc.Tab(card_top_tarif, label="Choix tarifaire", tab_id="top_tarif",id="top_tarif")

tabs = dbc.Card(dbc.CardBody([
        dbc.Tabs([
            tab_top_tarif
            ,]
            , id="tabs"
            , active_tab="top_tarif"
            ,)
        ,],
        id="card_body"
        ,))
        
app.layout  = dbc.Container([
        tabs
        ,],)

@app.callback(Output(component_id="card_body", component_property="children"),
               [Input(component_id="top_masse", component_property="n_clicks"),
              Input(component_id="top_parc", component_property="n_clicks")
              ,])

def tarif_masse(n_clicks1,n_clicks2):

    if n_clicks1>=1:
        return dbc.Alert('The button has been clicked {} times'.format(n_clicks2), color="primary")
    elif n_clicks2>=1:
        return dbc.Alert('The button has been clicked {} times'.format(n_clicks1), color="primary")

    
@app.callback(Output(component_id="alert", component_property="children"), 
              [Input(component_id="importation", component_property="n_clicks")
              ,])

def tarif_masse(n_clicks):

    if n_clicks>=1:
        return 'The button has been clicked {} times'.format(n_clicks)


if __name__ == "__main__":
    app.run_server(debug=False,port=8080,host='0.0.0.0')

标签： pythonbuttoninputcallbackplotly-dash

解决方案

实际上你只需要定义'else'并且它有效，我无法解释它但它有效。

@app.callback(Output(component_id="card_body", component_property="children"),

               [Input(component_id="top_masse", component_property="n_clicks"),

              Input(component_id="top_parc", component_property="n_clicks")

              ,])

def tarif_masse(n_clicks1,n_clicks2):

    if n_clicks1 is not None:

        return dbc.Alert('The button has been clicked {} times'.format(n_clicks1), 

color="primary")

    elif n_clicks2 is not None:

        return dbc.Alert('The button hed {} times'.format(n_clicks2), color="primary")

    else:

        return dbc.Tabs([tab_top_tarif,], id="tabs", active_tab="top_tarif")


if __name__ == "__main__":

    app.run_server(debug=False,port=8050,host='0.0.0.0')```

推荐阅读