如何在 python 的選項卡內使用 plotly-dash 按鈕觸發功能？

Question

我對編程和 plotly dash 也很陌生。 我的儀表板中有一些選項卡，在每個選項卡中我都有一個文本輸入框（int）和一個使用輸入觸發一些計算的按鈕。

使用以下腳本，當我 select 選項卡時，觸發回調並且計算已經從文本中的空值開始，甚至在我單擊按鈕之前。 當文本輸入框為空時，我確實有一個 if 子句不返回任何內容。 但這似乎不起作用。 它直接進入最后的“else”子句。 我該如何解決這個問題？ 謝謝！

@app.callback(Output('PRINTOUTPUT', 'children'),
              [Input('create_button', 'n_clicks'),
              Input('selection_tabs', 'value')],
              [State('text-input', 'value')])

def xyz (clicks, selected_tab, textinput):    
    
    changed_id = [p['prop_id'] for p in dash.callback_context.triggered][0] #To determine if n_clicks is changed. 

      
    if 'create_button' not in changed_id:
        return ""

    elif 'create_button' in changed_id:           
        if textinput =="":  #Do nothing if button is clicked and input num is blank.            
            return "No input"
        
        else: 
            #Do some calculations based on the selected tab and input
             return "Successful"

Answer 1

假設您使用dcc.Input組件進行文本輸入，它有一個可選參數value ，可以在定義它時設置。 默認情況下，此值設置為 python 的None 。 因此，如果您在定義它時沒有將此參數的值設置為空字符串"" ，那么將其與if子句中的""進行比較將導致False ，這就是它總是在else子句中結束的原因。

您只需要檢查您的 textinput 是否為None 。 嘗試將 if 子句更改為if textinput is None: #Do nothing if button is clicked and input num is blank. 或者您也可以在定義輸入框的位置將輸入框的默認值顯式設置為"" ，但這似乎有點違反直覺。

Answer 2

如果您的代碼中存在問題，則它可能在您粘貼到問題的部分之外的其他地方。 我圍繞您提供的回調寫了一個 MWE，它似乎按照您的意圖工作：

回調的改進

• 下面的代碼包括一些改進的回調
• component_id.component_property列表中項目的prop_id屬性采用dash.callback_context.triggered形式。 因此，如果要檢查是否是'create_button'觸發了回調，則應與點之前的部分進行比較（或直接與'create_button.n_clicks'進行比較）。
• 以前，僅檢查列表dash.callback_context.triggered中的第一個元素。 您可能想要檢查列表中的所有元素，盡管在當前版本的 dash 它只能包含單個組件的屬性：“是一個長度為 1 的列表，除非單個組件的兩個屬性同時更新，例如一個值以及時間戳或事件計數器。” ( dash.callback_context.triggered )
• 通過刪除不必要的 if 語句嵌套來提高可讀性，因為 function 的執行在return后不會繼續。

完整代碼

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

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

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)


tab_div = html.Div(
    dcc.Tabs(id='selection_tabs', value='tab-1', children=[
        dcc.Tab(label='Tab one', value='tab-1'),
        dcc.Tab(label='Tab two', value='tab-2'),
]))

app.layout = html.Div(children=[
    html.H1(children='Test app'),
    tab_div,
    dcc.Input(id="text-input", type="text", placeholder=""),
    html.Div(id='PRINTOUTPUT'),
    html.Button('Click me', id='create_button')
])

@app.callback(Output('PRINTOUTPUT', 'children'),
              [Input('create_button', 'n_clicks'),
              Input('selection_tabs', 'value')],
              [State('text-input', 'value')])

def xyz(clicks, selected_tab, textinput):    

    #To determine if n_clicks is changed. 
    changed_ids = [p['prop_id'].split('.')[0] for p in dash.callback_context.triggered]
    button_pressed = 'create_button' in changed_ids

    if not button_pressed:
        return ""

    if textinput == "":  #Do nothing if button is clicked and input num is blank.            
        return "No input"
    
    #Do some calculations based on the selected tab and input
    return "Successful"

if __name__ == '__main__':
    app.run_server(debug=True)