在dash中触发事件和vue react不一样，不是绑定一个函数，而是使用callback去监听dom的属性值的变化。

触发事件

一对一

from dash import Dash, html, callback, Output, Input

app = Dash(__name__)

app.layout = html.Div([
    html.H1(children='HELLO DASH', id="h1"),
    html.Button("click",id="btn")
])

# 绑定输入和输出的id，指定对应的属性，回调函数会把return的内容返回到指定ID的属性上
@callback(
    Output("h1", "children"),
    Input("btn", "n_clicks")
)
def cb_btn(n_clicks):
    if n_clicks is None:
        return "HELLO DASH"
    return "button clicked"

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

多对一

1. 多个outpur就要return 对应数量内容，不然会报错

from dash import Dash, html, callback, Output, Input

app = Dash(__name__)

app.layout = html.Div([
    html.H1(children='HELLO DASH', id="h1"),
    html.Button("btn", id="btn"),
    html.Button("btn2", id="btn2"),
])

# 绑定输入和输出的id，指定对应的属性，回调函数会把return的内容返回到指定ID的属性上


@callback(
    Output("h1", "children"),
    Input("btn", "n_clicks"),
    Input("btn2", "n_clicks"),
)
def cb_btn(n_clicks1, n_clicks2):
    if n_clicks1 is None:
        return "HELLO DASH"
    if n_clicks2 is None:
        return "HELLO DASH"
    return "button clicked"


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

多对多

绑定多个output就要return 多个内容，

1. 多个outpur就要return 对应数量内容，不然会报错
2. 可以使用括号的方式，指定多个输出，这样看起来会更加整洁，但是记得output用了数组括起来，return 也需要用数组括起来

from dash import Dash, html, callback, Output, Input

app = Dash(__name__)

app.layout = html.Div([
    html.H1(children='HELLO DASH', id="h1"),
    html.Button("btn", id="btn"),
    html.Button("btn2", id="btn2"),
])

# 绑定输入和输出的id，指定对应的属性，回调函数会把return的内容返回到指定ID的属性上

# 1 多个输入多个输出


@callback(
    Output("h1", "children"),
    Output("h1", "style"),
    Input("btn", "n_clicks"),
    Input("btn2", "n_clicks"),
)
def cb_btn(n_clicks1, n_clicks2):
    if n_clicks1 is None:
        return "HELLO DASH", {}
    if n_clicks2 is None:
        return "HELLO DASH", {}
    return "button clicked", {"color": "red"}


# 2 可以使用括号的方式，指定多个输出，这样看起来会更加整洁，但是记得output用了数组括起来，return 也需要用数组括起来
# @callback(
#     [
#         Output("h1", "children"),
#         Output("h1", "style")
#     ],
#     [
#         Input("btn", "n_clicks"),
#         Input("btn2", "n_clicks")
#     ],
# )
# def cb_btn(n_clicks1, n_clicks2):
#     if n_clicks1 is None:
#         return "HELLO DASH", {}
#     if n_clicks2 is None:
#         return "HELLO DASH", {}
#     return ["button clicked", {"color": "red"}]


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

禁止初始化执行

很多时候我们希望callback能够被我们手动触发，不希望默认执行，默认执行我们还需要判断None，非常的麻烦

使用 prevent_initial_callbacks=True

@callback(
    [
        Output("h1", "children"),
        Output("h1", "style")
    ],
    [
        Input("btn", "n_clicks"),
        Input("btn2", "n_clicks")
    ],
	prevent_initial_callbacks=True
)
def cb_btn(n_clicks1, n_clicks2):
    if n_clicks1 is None:
        return "HELLO DASH", {}
    if n_clicks2 is None:
        return "HELLO DASH", {}
    return ["button clicked", {"color": "red"}]

客户端回调

客户端回调支持用户在事件触发时执行js函数， 且js函数需要返回output

from dash import (
    callback,
    clientside_callback
)


clientside_callback(
    """
        function (n_clicks){
            console.log(`点击了${n_clicks}次`)
            return "客户端回调"
        }
    """,
    Output(f"{AppId}test", 'children'),
    Input(f"{AppId}btn", 'n_clicks'),
    prevent_initial_call=True,
)