Question

我试图根据Dash中的用户输入来更改标题。但是不知道如何将值传递给html.H1标记，因为它不接受参数value。当用户提交输入时，如何更改标题？


# -*- 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)

Answer 1

您可以在回调中创建整个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)

如何根据Dash中的用户输入更改标题标题？

1 个答案: