简体   繁体   中英

How can I dynamically change html.Button text in dash?

I have tried different attributes ( title, data, value, etc ) but they dont do the trick. Below is the sample code taken directly from the dash documentation. I simply would like to be able to push the button and have the button text change to something else besides "Submit", preferably the input text.

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)

Well, I found that I needed to update the "children" property. Below is code that performs the function I was looking for:

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)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM