React 在模态中使用表单将输入的数据传递给函数

Posted 2023-02-18

【中文标题】React 在模态中使用表单将输入的数据传递给函数

【英文标题】：React use a form in a modal to pass the inputted data to a function

【发布时间】：2021-12-06 07:08:26

【问题描述】：

我正在使用 react-bootstrap/Modal 和 react-hook-form。我希望用户在输入中插入数据，提交后将转到我想用它制作对象的函数。

<form onSubmit=handleSubmit(update)>
                        <Modal show=show onHide=handleClose>
                            <Modal.Header closeButton>
                                <Modal.Title>Edit</Modal.Title>
                            </Modal.Header>
                            <Modal.Body>
                                <label>Description</label>
                                <input name="message" type="text" ref=register placeholder="description"/>
                            </Modal.Body>
                            <Modal.Footer>
                                <button variant="secondary" onClick=handleClose>
                                    Cancel
                                </button>
                                <button type="submit" variant="primary" onClick=update>
                                    Edit
                                </button>
                            </Modal.Footer>
                        </Modal>
                    </form>



//I will need the async function later to await an api call.
const update = (data) => 
        (async () => 
            console.log("data", data)
        )()
    

感谢您的帮助！

编辑：

我找到了解决方案，我不得不将表单放在模态组件之外。

<Modal show=show onHide=handleClose>
    <form onSubmit=handleSubmit(update)>
        <Modal.Header closeButton>
            <Modal.Title>Edit</Modal.Title>
        </Modal.Header>
        <Modal.Body>
            <label>Description</label>
            <input name="message" type="text" placeholder="description" />
        </Modal.Body>
        <Modal.Footer>
            <button variant="secondary" onClick=handleClose>
                Cancel
            </button>
            <button type="submit" variant="primary" onClick=update>
                Edit
            </button>
        </Modal.Footer>
    </form>
</Modal>

【问题讨论】：

嘿！您是否尝试过使用Modal.Body 中的表格？这样你就可以包装“输入”而不是整个模态

@PedroFilipe 我现在正在尝试，但我想要实现的是让“编辑”按钮在表单提交时设置。如果我将表单放在 Modal.Body 中，我将获得 2 个提交按钮（1x Form，1x Modal.Footer）。

【参考方案1】：

由于您使用的是react-hook-forms，所以表单提交后就可以得到结果。

在您的情况下，结果对象如下所示： message: "一些消息数据"

因此，您需要在update 函数上获取data 参数的“消息”属性。

注意：您将message 作为input 元素的名称属性传递，因此data.message 将为您提供由react-hook-forms 控制的input 元素上的相应数据

const update = (data) => 
        (async () => 
            console.log("data", data.message)
        )()
    

【讨论】：

我认为你误解了这个问题（或者只是我的英语不好），我对 Api 调用没有任何问题。我只是不确定如何将我在表单/模式中输入的数据获取到我的函数中，以便我可以在那里进行控制台记录。

我现在已经更新了我的答案，@JasonMimo