带有点击事件的基本Button的短跑核心组件? [英] Dash core component for basic Button with click event?

问题描述

我正在尝试创建一个具有多个选项卡的应用程序，以用于不同的信息集.我的第一个念头是使用html Button，但是没有dash_core_component，而且我找不到可以在此使用的任何内容的文档.基本上，当我单击一个按钮(或链接)时，我想获得一个带有按钮ID的被点击"事件，以便我可以重新绘制所选页面的布局.

I'm trying to create an app with multiple tabs for different sets of information. My first thought was to use html Buttons but there's not dash_core_component for this, and I can't find documentation on anything I can use in it's place. Basically, when I click a button (or link), I'd like to get a "clicked" event with the id of the button so I can redraw the layout for the selected page.

有没有办法对现有组件执行此操作?是否有关于如何创建可以连接到回调系统的新组件的文档?我觉得我一定缺少明显的东西，但是经过大量搜索后我还是没找到任何东西.

Is there a way to do this with existing components? Is there documentation on how to create new components that can be wired into the callback system? I feel like I must be missing something obvious, but I've failed to find anything after a lot of searching.

谢谢！

推荐答案

实际上，它们确实在最新的dash_html_components中具有可用于按钮的click事件，但是似乎尚未完全记录在案.创建者chriddyp具有

In fact, they do have a click event available for a button in the latest dash_html_components, but it doesn't appear to be fully documented yet. The creator, chriddyp, has stated that the Event object may not be future-proof, but that State should be.

像这样使用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')触发回调.

you can use values as inputs, without initiating the callback if they change -- instead waiting for the Input('button', 'n_clicks') to fire off the callback.

在下面的链接中复制完整的代码示例:

Copying full code example below from the link:

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)

这篇关于带有点击事件的基本Button的短跑核心组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！