Как изменить заголовок заголовка на основе ввода пользователя в Da sh? - PullRequest
Новая
       24

Как изменить заголовок заголовка на основе ввода пользователя в Da sh?

0 голосов
/ 27 мая 2020

Я пытаюсь изменить заголовок заголовка на основе ввода пользователя в Da sh. Но не знаю, как передать значение тегу html.H1, поскольку он не принимает аргумент value. Как я могу go изменить заголовок, когда пользователь отправляет ввод? 


# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html

from dash.dependencies import Input
from dash.dependencies import Output
from dash.dependencies import State


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

ticker_default = 'AAPL'

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

colors = {
    'background': '#111111',
    'text': '#7FDBFF'
}

app.layout = html.Div([
    dcc.Input(
        id='ticker', 
        value='AAPL', 
        type="text"
    ),

    html.Button(
        'Submit', 
        id='button'
    ),

    html.Div(id='ticker_field'),
    html.Div(id='ticker_header', children=[
        html.H1('DCF Valuation' + USER INPUT TICKER),

    ])



])

@app.callback(
    [
        Output('ticker_header', 'children')
    ],
    [

        Input('button', 'n_clicks'),

    ],
    [
        State(component_id='ticker', component_property='value'),
        #State(component_id='ticker_header', component_property='value'),

    ]
)
def update_ticker_header(ticker):
    return f'{ticker}'



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

1 Ответ

1 голос
/ 28 мая 2020

Вы можете создать весь тег html.H1 в обратном вызове, как в примере ниже. 

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

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([

    dcc.Input(
        id='ticker',
        value='AAPL',
        type="text"
    ),

    html.Button(
        'Submit',
        id='button'
    ),

    html.Div(
        id='ticker_header'
    ),

])

@app.callback([Output('ticker_header', 'children')], [Input('button', 'n_clicks')],
    [State('ticker', 'value')])
def update_ticker_header(clicks, ticker):

    return [html.H1('DCF Valuation ' + f'{ticker}')]

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

В качестве альтернативы вы можете создать дополнительный html.Div внутри тега html.H1, а затем обновить только содержимое этого html.Div в обратном вызове, как в примере ниже. 

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

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([

    dcc.Input(
        id='ticker',
        value='AAPL',
        type="text"
    ),

    html.Button(
        'Submit',
        id='button'
    ),

    html.H1(children=[
        'DCF Valuation ',
        html.Div(id='ticker_header', style={'display': 'inline'}),

    ]),

])

@app.callback([Output('ticker_header', 'children')], [Input('button', 'n_clicks')],
    [State('ticker', 'value')])
def update_ticker_header(clicks, ticker):

    return [f'{ticker}']

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