dash_bootstrap_components 'form' 的'Action' 属性

Question

我正在尝试使用dash 和dash-bootstrap-components 构建一个小表单，但我不知道如何使用表单的'action' attribute。

或者，更确切地说，我正在尝试将用户输入到表单中的数据保存到 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。默认为真。

根据您的问题，您似乎只想在提交时做一些事情，不需要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 是保留关键字，因此我不会将其用作参数名称。我还添加了默认返回语句。这里不是很必要，因为prevent_initial_call 设置为True，但它显示了您如何解释n_submit 将评估为False 的情况。