如何在 Python Dash 应用程序中保存来自 dbc.Modal 的输入并写入 mySql 数据库？

Question

我创建了一个按钮，单击它会弹出一个破折号 boostrap 组件，dbc.Modal 带有几个输入字段。现在我想知道如何保存此输入信息并写入 MySQL.

之类的数据库

我知道如何在 Dash 中的常规 html 按钮的上下文中 read/write 到数据库，并使用单击按钮时触发的回调函数。但是不知道如何使用模态和回调。我在网上找不到任何示例，文档也没有说明如何使用模态保存输入数据并连接外部数据库。请指教。下面是我的一段代码：

编辑代码：

dbc.Modal(
                            [
                                dbc.ModalHeader("Add Favorite Faculty"),
                                dbc.ModalBody(
                                    dbc.Form(
                                        [
                                            dbc.Row(
                                                [
                                                    dbc.Label("Enter Name:", id="fav-name"),
                                                    dbc.Input(type="text", placeholder="name")
                                                ]
                                            ),
                                            html.Br(),
                                            dbc.Row(
                                                [
                                                    dbc.Label("Enter Email:", id="fav-email"),
                                                    dbc.Input(type="email", placeholder="email")
                                                ],
                                            ),
                                            html.Br(),
                                            dbc.Row(
                                                [
                                                    dbc.Label("Enter Comment:", id="fav-comment"),
                                                    dbc.Input(type="text", placeholder="comment")
                                                ],
                                            ),
                                            html.Br(),
                                            dbc.Button("Submit", id='fav-submit', color="primary"),
                                        ],
                                    )
                                ),
                                dbc.ModalFooter(
                                    dbc.Button("Close", color="secondary", id="close-add-faculty", className="ml-auto")
                                ),
                            ],
                            id="fav-modal",
                            is_open=False,

我的基本回调函数只是打开和关闭模式。本质上，我想在单击提交按钮时保存输入字段并写入数据库。

# prompt modal
@app.callback(
    Output("fav-modal", "is_open"),
    [
        Input("add-faculty-button", "n_clicks"),
        Input("close-add-faculty", "n_clicks")
    ],
    [State("fav-modal", "is_open")]
)
def toggle_modal(n1, n2, is_open):
    if n1 or n2:
        return not is_open
    return is_open

# write to DB
@app.callback(
    Output("written", "children"),
    [
        State("fav-name", "value"),
        State("fav-email", "value"),
        State("fav-comment", "value")
    ],
    [
        Input("fav-submit", "n_clicks")
    ]
)
def write_to_db(n_clicks, name, email, comment):

    if n_clicks is not None:
        ....

它的外观图片：

Answer 1

在这种情况下，这些输入在模态内的事实并不重要。您仍然可以使用这些组件 ID 设置回调以获取每个输入的值，然后使用它传递到您的数据库。

您可能需要考虑添加一个“提交”按钮或类似按钮，作为回调的触发器，并将这些输入作为 State。否则，每次输入更新时都会触发您的回调，并且您可能会向数据库发送大量不需要的值。

编辑：

您需要为所有 dbc.Input 组件和提交按钮添加 ID，以便将它们连接到回调。这是一个例子。

# layout code
    dbc.Input(type="text", placeholder="name", id='name-input')
# end of layout

@app.callback(
    Output("some-notification-contaienr", "children"),
    [
        Input("submit-button", "n_clicks"),
    ],
    [
        State("name-input", "value"),
        State("email-input", "value"),
        State("comment-input", "value"),
    ]
)
def toggle_modal(submit_clicks, name, email, comment):
    if not submit_clicks:
        raise PreventUpdate

    # some code here to send your stuff to the database
    # ...

    return 'Successfully submitted.'

如何在 Python Dash 应用程序中保存来自 dbc.Modal 的输入并写入 mySql 数据库？

How to save input from a dbc.Modal and write to mySql database in Python Dash app?

python

database

bootstrap-modal

plotly-dash