带有点击事件的基本按钮的短跑核心组件？

Posted 2023-02-16

【中文标题】带有点击事件的基本按钮的短跑核心组件？

【英文标题】：Dash core component for basic Button with click event?

【发布时间】：2018-01-16 16:53:32

【问题描述】：

我正在尝试为不同的信息集创建一个包含多个选项卡的应用。我的第一个想法是使用 html 按钮，但没有 dash_core_component ，而且我找不到任何我可以使用的文档。基本上，当我点击一个按钮（或链接）时，我想获得一个带有按钮 id 的“点击”事件，这样我就可以重绘所选页面的布局。

有没有办法用现有的组件做到这一点？是否有关于如何创建可以连接到回调系统的新组件的文档？我觉得我一定遗漏了一些明显的东西，但是经过大量搜索后我没有找到任何东西。

谢谢！

【问题讨论】：

请注意，html.Button 组件现已完整记录。

【参考方案1】：

事实上，他们在最新的dash_html_components 中确实有一个可用于按钮的点击事件，但似乎还没有完整的文档记录。创建者 chriddyp 告诉 stated，Event 对象可能不会面向未来，但 State 应该是。

使用State 喜欢：

@app.callback(
    Output('output', 'children'),
    [Input('button-2', 'n_clicks')],
    state=[State('input-1', 'value'),
     State('input-2', 'value'),
     State('slider-1', 'value')])

您可以将值用作输入，如果它们发生变化，则无需启动回调——而是等待Input('button', 'n_clicks') 触发回调。

从链接复制下面的完整代码示例：

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

app = dash.Dash()

app.layout = html.Div([
    html.Button('Click Me', id='button'),
    html.H3(id='button-clicks'),

    html.Hr(),

    html.Label('Input 1'),
    dcc.Input(id='input-1'),

    html.Label('Input 2'),
    dcc.Input(id='input-2'),

    html.Label('Slider 1'),
    dcc.Slider(id='slider-1'),

    html.Button(id='button-2'),

    html.Div(id='output')
])

@app.callback(
    Output('button-clicks', 'children'),
    [Input('button', 'n_clicks')])
def clicks(n_clicks):
    return 'Button has been clicked  times'.format(n_clicks)

@app.callback(
    Output('output', 'children'),
    [Input('button-2', 'n_clicks')],
    state=[State('input-1', 'value'),
     State('input-2', 'value'),
     State('slider-1', 'value')])
def compute(n_clicks, input1, input2, slider1):
    return 'A computation based off of , , and '.format(
        input1, input2, slider1
    )

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

【参考方案2】：

啊哈！终于找到了答案，记录在这里：https://plot.ly/dash/urls

最好以更明显的方式将其链接到用户指南中（在索引中？）

【讨论】：

你没有回答这个问题。链接和按钮不一样。