Input callback 연결

문제

input box 에 문자를 입력하면 자동으로 아래에 해당 입력이 출력되도록 callback 연결하도록 웹페이지 개발

 

방법1: ID  활용

from dash import Dash, html, dcc, Input, Output

app = Dash()

app.layout = html.Div([
    dcc.Input(id='input-text', value='Change this text', type='text'),
    html.Div(children='', id='output-text')
])


@app.callback(
    Output(component_id='output-text', component_property='children'),
    Input(component_id='input-text', component_property='value')
)
def update_output_div(input_text):
    return f'Text: {input_text}'


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

 

방법2: Variable 활용

from dash import Dash, html, dcc, Input, Output

app = Dash()

input_text = dcc.Input(id='input-text', value='Change this text', type='text')
output_text = html.Div(children='', id='output-text')

app.layout = html.Div([
    input_text,
    output_text
])


@app.callback(
    Output(component_id=output_text, component_property='children'),
    Input(component_id=input_text, component_property='value')
)
def update_output_div(input_text):
    return f'Text: {input_text}'


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

 

참고: https://www.udemy.com/course/python-interactive-dashboards-with-plotly-dash