[英]Multi input to single output in Dash
I am wanting to have a multi field input where someone enters the elements of an address and then that address is returned to them as a complete single string after pressing a submit button.我想要一个多字段输入,其中有人输入地址的元素,然后在按下提交按钮后将该地址作为完整的单个字符串返回给他们。 So far I have the following which produced the entry fields and submit button but nothing happens when I enter a new address.到目前为止,我有以下内容生成了输入字段和提交按钮,但是当我输入新地址时没有任何反应。 I am unsure of how to make this happen:我不确定如何做到这一点:
app = dash.Dash()
app.layout = html.Div([
html.H1("Input new address"),
dcc.Input(
id = 'Property_name',
placeholder='Property Name',
type = 'text',
value = '',
),
dcc.Input(
id = 'Stree_name',
placeholder='Street Name',
type = 'text',
value = '',
),
dcc.Input(
id = 'City',
placeholder = 'City',
type = 'text',
value = '',
),
dcc.Input(
id = 'Zip_code',
placeholder = 'Zip code',
type = 'text',
value = '',
),
dcc.Input(
id = 'Country',
placeholder = 'Country',
type = 'text',
value = '',
),
html.Button(id='Submit_address', n_clicks=0, children='Submit'),
html.Br(),
html.Div(id = 'address'),
])
@app.callback([
Output('address', 'children')],
[Input('Property_name', 'value'),
Input('Stree_name', 'value'),
Input('City', 'value'),
Input('Zip_code', 'value'),
Input('Country', 'value')
])
def update_map(n_clicks, address):
if n_clicks is None:
return dash.no_update
else:
return f"Added new address at GeoCords: {address}"
if __name__ == '__main__':
app.run_server(debug=False)
You should be able to trigger the callback via the submit button by using the submit button as an input and the values as states, like this:您应该能够通过使用提交按钮作为输入和值作为状态,通过提交按钮触发回调,如下所示:
@app.callback(
[Output('address', 'children'],
[Input('Submit_address', 'n_clicks')],
[State('Property_name', 'value'),
State('Stree_name', 'value'),
etc.
])
def update_children(n, prop_name, stree_name, etc.):
[your function here]
Didn't test the code, but that is how I did it in my project.没有测试代码,但这就是我在我的项目中所做的。 Does that help you?这对你有帮助吗?
EDIT:编辑:
Here you go, this code works.给你,这段代码有效。 You just have to edit the function to output the string you want.你只需要编辑函数来输出你想要的字符串。
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output, State
from dash import dash
app = dash.Dash()
app.layout = html.Div([
html.H1("Input new address"),
dcc.Input(
id='Property_name',
placeholder='Property Name',
type='text',
value='',
),
dcc.Input(
id='Stree_name',
placeholder='Street Name',
type='text',
value='',
),
dcc.Input(
id='City',
placeholder='City',
type='text',
value='',
),
dcc.Input(
id='Zip_code',
placeholder='Zip code',
type='text',
value='',
),
dcc.Input(
id='Country',
placeholder='Country',
type='text',
value='',
),
html.Button(id='Submit_address', n_clicks=0, children='Submit'),
html.Br(),
html.Div(id='address'),
])
@app.callback(
[Output('address', 'children')],
[Input('Submit_address', 'n_clicks')],
[State('Property_name', 'value'),
State('Stree_name', 'value'),
State('City', 'value'),
State('Zip_code', 'value'),
State('Country', 'value')])
def update_map(n_clicks, prop_name, street, city, zip, country):
print(prop_name)
return [html.Div(f"Added new address at GeoCords: {prop_name}")]
if __name__ == '__main__':
app.run_server(debug=False)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.