'Action' dash_bootstrap_components 'form' 的属性

Question

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

或者，更确切地说，我正在尝试将用户输入表单的数据保存到 Postgres 数据库中，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 (boolean; default True): The form calls preventDefault on submit events. If you want form data to be posted to the endpoint specified by action on submit events, set prevent_default_on_submit to False. Defaults to 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 在上面的回调中被 returned 以显示提交操作有效，但您可能想根据需要将其更改为其他内容.

更新

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

@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 的情况。

'Action' dash_bootstrap_components 'form' 的属性

'Action' attribute of the dash_bootstrap_components 'form'

python

forms

plotly-dash

dash-bootstrap-components