如何动态更改破折号中的 html.Button 文本？

Posted 2023-03-25

【中文标题】如何动态更改破折号中的 html.Button 文本？

【英文标题】：How can I dynamically change html.Button text in dash?

【发布时间】：2021-12-21 18:28:58

【问题描述】：

我尝试了不同的属性（标题、数据、值等），但它们都不起作用。下面是直接取自 dash 文档的示例代码。我只是希望能够按下按钮并将按钮文本更改为“提交”之外的其他内容，最好是输入文本。

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

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div(dcc.Input(id='input-on-submit', type='text')),
    html.Button('Submit', id='submit-val', n_clicks=0),
    html.Div(id='container-button-basic',
             children='Enter a value and press submit')
])


@app.callback(
    Output('container-button-basic', 'children'),
    Input('submit-val', 'n_clicks'),
    dash.dependencies.State('input-on-submit', 'value')
)

def update_output(n_clicks, value):
    
    return ('The input value was "" and the button has been clicked  times'.format(
        value,
        n_clicks
    ))


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

【参考方案1】：

好吧，我发现我需要更新“children”属性。下面是执行我正在寻找的功能的代码：

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

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div(dcc.Input(id='input-on-submit', type='text')),
    html.Button('Submit', id='submit-val', n_clicks=0),
    html.Div(id='container-button-basic',
             children='Enter a value and press submit')
])


@app.callback(
    Output('container-button-basic', 'children'),
    Output ('submit-val','children'),
    Input('submit-val', 'n_clicks'),
    dash.dependencies.State('input-on-submit', 'value')
)

def update_output(n_clicks, value):
    
    if n_clicks==0:
        return
    else:
        buttonText = value
    
    
    return ('The input value was "" and the button has been clicked  times'.format(
        value,
        n_clicks
    ), buttonText)


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

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。