html.Button在Google colaboratory中未与JupyterDash配合使用

如何解决html.Button在Google colaboratory中未与JupyterDash配合使用

我正在尝试创建一个带有按钮的仪表板，以触发Google Colab笔记本中破折号中的动作。

我有以下代码可以使用Dash（在Pycharm中）完美运行：

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


app.layout = html.Div([
    html.Button('Button 1',id='btn-nclicks-1',n_clicks=0),html.Button('Button 2',id='btn-nclicks-2',html.Button('Button 3',id='btn-nclicks-3',html.Div(id='container-button-timestamp')
])

@app.callback(Output('container-button-timestamp','children'),[Input('btn-nclicks-1','n_clicks'),Input('btn-nclicks-2',Input('btn-nclicks-3','n_clicks')])
def displayClick(btn1,btn2,btn3):
    changed_id = [p['prop_id'] for p in dash.callback_context.triggered][0]
    if 'btn-nclicks-1' in changed_id:
        msg = 'Button 1 was most recently clicked'
    elif 'btn-nclicks-2' in changed_id:
        msg = 'Button 2 was most recently clicked'
    elif 'btn-nclicks-3' in changed_id:
        msg = 'Button 3 was most recently clicked'
    else:
        msg = 'None of the buttons have been clicked yet'
    return html.Div(msg)

app.run_server()

我有一个google colab，在这里我使用JupyterDash而不是Dash（如下所示）：

!pip install jupyter_dash
from jupyter_dash import JupyterDash
from dash.dependencies import Input,Output
import dash_html_components as html

app = JupyterDash()

app.layout = html.Div([
    html.Button('Button 1',btn3):
    changed_id = [p['prop_id'] for p in dash.callback_context.triggered][0]
    if 'btn-nclicks-1' in changed_id:
        msg = 'Button 1 was most recently clicked'
    elif 'btn-nclicks-2' in changed_id:
        msg = 'Button 2 was most recently clicked'
    elif 'btn-nclicks-3' in changed_id:
        msg = 'Button 3 was most recently clicked'
    else:
        msg = 'None of the buttons have been clicked yet'
    return html.Div(msg)

app.run_server(mode='inline')

运行它时，我得到了一个带有三个按钮的仪表板，没有错误消息，但是单击按钮时它什么也不做。例如，我希望在单击按钮3后收到诸如“未单击任何按钮”（启动时）或“最近单击了按钮3”之类的消息。

按钮是否在JupityerDahs中不起作用？ 谢谢。

解决方法

我已修复（基于此colab）。

!pip install -q jupyter-dash==0.3.0rc1 dash-bootstrap-components transformers
import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input,Output,State
from jupyter_dash import JupyterDash

#app = JupyterDash()
# Define app
app = JupyterDash(__name__,external_stylesheets=[dbc.themes.BOOTSTRAP])
server = app.server

app.layout = html.Div([
    html.Button('Button 1',id='btn-nclicks-1',n_clicks=0),html.Button('Button 2',id='btn-nclicks-2',html.Button('Button 3',id='btn-nclicks-3',html.Div(id='container-button-timestamp')
])

@app.callback(Output('container-button-timestamp','children'),[Input('btn-nclicks-1','n_clicks'),Input('btn-nclicks-2',Input('btn-nclicks-3','n_clicks')])
def displayClick(btn1,btn2,btn3):
    changed_id = [p['prop_id'] for p in dash.callback_context.triggered][0]
    if 'btn-nclicks-1' in changed_id:
        msg = 'Button 1 was most recently clicked'
    elif 'btn-nclicks-2' in changed_id:
        msg = 'Button 2 was most recently clicked'
    elif 'btn-nclicks-3' in changed_id:
        msg = 'Button 3 was most recently clicked'
    else:
        msg = 'None of the buttons have been clicked yet'
    return html.Div(msg)

app.run_server(mode='external')