'Action' dash_bootstrap_components 'form'的属性

Question

我试图用dash和dash-bootstrap-components构建一个小表单，但我不知道如何使用表单的"action"属性。

或者，更确切地说，我正试图将用户输入表单的数据保存到Postgres DB中，action属性似乎是实现这一点的方法，但我找不到任何关于如何使用它的示例。

有人有使用DBC构建表单的经验吗？

编辑我目前的解决方案是(以简化的形式(：

def handle_submit(n_submit, e, pass): 
username = e.split('@') 
pg = pd.DataFrame(e, username, pass) 
if n_submit:
pg.to_sql("table", con=db.engine, if_exists="append", index=False)
return 'success'

但这似乎不起作用。

Answer 1

默认情况下不使用action端点

prevent_default_on_submit(布尔值；默认为True(：表单在提交事件时调用preventDefault。如果希望将表单数据发布到提交事件操作指定的端点，请将prevent_default_on_submit设置为False。默认值为True。

根据您的问题，您似乎只是想在提交时做点什么，而不需要action。在这种情况下，你可以这样做：

from dash import Dash
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Output, Input, State
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
form = dbc.Form(
id="form",
children=[
dbc.FormGroup(
[
dbc.Label("Email", className="mr-2"),
dbc.Input(id="email", type="email", placeholder="Enter email"),
],
className="mr-3",
),
dbc.FormGroup(
[
dbc.Label("Password", className="mr-2"),
dbc.Input(id="password", type="password", placeholder="Enter password"),
],
className="mr-3",
),
dbc.Button("Submit", color="primary"),
],
inline=True,
)
app.layout = html.Div([form, html.Div(id="output")])

@app.callback(
Output("output", "children"),
Input("form", "n_submit"),
State("email", "value"),
State("password", "value"),
prevent_initial_call=True
)
def handle_submit(n_submit, email, password):
# Do stuff...
return n_submit

if __name__ == "__main__":
app.run_server()

n_submit在上面的回调中返回，以表明提交操作有效，但您可能想根据需要将其更改为其他操作

更新

根据您的编辑，您可以将回调更改为以下内容：

@app.callback(
Output("output", "children"),
Input("form", "n_submit"),
State("email", "value"),
State("password", "value"),
prevent_initial_call=True,
)
def handle_submit(n_submit, email, password):
username = email.split("@")
pg = pd.DataFrame(
{"email": [email], "username": [username], "password": [password]}
)
if n_submit:
pg.to_sql("table", con=db.engine, if_exists="append", index=False)
return "success"
return ""

我已经更改了DataFrame的构造方式和变量名称。pass是一个保留关键字，所以我不会将其用作参数名称。我还添加了一个默认的return语句。由于prevent_initial_call设置为True，因此这里并没有必要，但它显示了如何解释n_submit评估为False的情况。