在 Python Dash 中的单击事件上返回“href”值答案

【问题标题】：Return ‘href’ value on a click event in Python Dash在 Python Dash 中的单击事件上返回“href”值
【发布时间】：2020-11-11 14:30:10
【问题描述】：

我一直在尝试从 python-Dash 应用程序的点击事件中返回“href”值。下面是我的代码 sn-p：

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


app = dash.Dash(
    __name__,
    meta_tags=[{"name": "viewport", "content": "width=device-width, initial-scale=1"}],
)


def make_table(df, val):
    table = []

    for index, row in df.iterrows():
        rows = []
        html.Td([
                    html.Div([row["col1"]]),
                    html.A(id = 'link',href=row["file-link"], children=row["link-name"], target="_blank"),
                  ])
        table.append(html.Tr(rows))

    return table


app.layout = html.Div([
                        html.Table(
                            id="table-element",
                            className="table__container",
                        )
                        ],
                        className="six columns",
                        ),


@app.callback(
    Output("link", 'pathname'),
    [Input('link', 'n_clicks')],
    [State('link', 'href')]
    )
def open_link(n_clicks, href):
    enable_open_link(href) #enable_open_link function takes in the href string value (a local filesystem link) and opens it up in a new window.


@app.callback(
    Output("table-element", 'children'),
    [Input("input-1-submit", 'n_submit')],
     [State('input-1-submit', 'value')]
)
def update_output(ns1,val):
    table = make_table(df,val)
    
    return table

此代码在某种程度上可以工作，即它确实返回一个 href 值，但不是我单击的那个。它总是返回存储在 html 表中的最后一个 href 值。

当我点击链接时，有没有办法获取 href 值？我知道我可以使用 Jquery 来获取正确的 href 值……但我没有找到将 javascript 集成到回调函数中的方法。

【问题讨论】：

标签： python python-3.x href plotly-dash

【解决方案1】：

从@Rudertier 提供的线程中获取线索，我能够得到解决方案。下面是更新后的代码sn-p：

def make_table(df, val):
    table = []

    for index, row in df.iterrows():
        rows = []
        html.Td([
                    html.Div([row["col1"]]),
                    html.A(id = 'link'+str(index),href=row["file-link"], children=row["link-name"], target="_blank"),
                  ])
        table.append(html.Tr(rows))

    return table


app.layout = html.Div([
                        html.Table(
                            id="table-element",
                            className="table__container",
                        )
                        ],
                        className="six columns",
                        ),


links = ['link1','link2','link3','link4','link5','link6','link7','link8','link9','link10']   
for link in links: 
    @app.callback(
        Output('{}'.format(link), 'pathname'),
        [Input('{}'.format(link), 'n_clicks')],
        [State('{}'.format(link), 'href')]
        )
    def open_link(n_clicks, href):
        enable_open_link(href) #enable_open_link function takes in the href string value (a local filesystem link) and opens it up in a new window.


@app.callback(
    Output("table-element", 'children'),
    [Input("input-1-submit", 'n_submit')],
     [State('input-1-submit', 'value')]
)
def update_output(ns1,val):
    table = make_table(df,val)
    
    return table

【讨论】：

【解决方案2】：

我认为这是因为您创建的所有链接都具有相同的id ='link'。

您需要找到解决方法。一种可能性是在根据您的 df 的索引创建 id 时生成它，但是您还必须创建相应的回调。这个线程告诉你它是如何完成的。 plotly dash: create multiple callbacks (with loop?)

【讨论】：

嘿路德，谢谢！有效。 tbh 我尝试使用多个回调运行它，但是将“链接”作为输入 component_id 提供了 component_property “n_clicks”，而不是动态分配 id。