当前位置：文江博客话题详情

如何使 HTML 选择标签与 Remix Form 一起使用？

发布于 2025-01-12 04:46:47 字数 109 浏览 3 评论 0原文

我一直在探索 Remix，并且非常喜欢从 Remix 导出表单的工作原理。但是，我似乎无法使选择与表单一起使用。使用 ref 提交表单可以完成这项工作，但会重新加载页面，这是我不想要的。有什么解决方法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

作死小能手 2025-01-19 04:46:47

提交混音表单的最简单方法是使用提交按钮。我假设在这种情况下您不需要提交按钮而是在选择时提交？

确保您使用的是实际的 Remix Form 组件。 HTML 表单元素始终会触发整页重新加载。

import { Form } from 'remix';

如果您的错误仍然存在，那么我假设您的 ref 触发了 form HTML 元素的默认行为，这就是提交表单会触发整个页面重新加载的原因。要以编程方式提交 Remix 表单，您可以使用 useFetcher 挂钩。您可以在此处找到 useFetcher 文档。

您的代码将如下所示：

function Component() {
    const fetcher = useFetcher();

    const handleSelect = (selectedValue) => {
        // programmatically submit a useFetcher form in Remix
        fetcher.submit({ selected: selectedValue }, { method: "post", action: "/");
    };

    return (
        <Select onSelect={handleSelect} />
    );
}

The easiest way to submit a Remix Form is by using a submit button. I assume in this case you don't want a submit button but rather submit on select?

Make sure that you are using the actual Remix Form component. The HTML form element will always trigger a full page reload.

import { Form } from 'remix';

If your error persists, then I assume that your ref triggers the default behavior of the form HTML element and that's why submitting the form triggers a full page reload. To programmatically submit a Remix form, you can use the useFetcher hook. You can find the useFetcher documentation here.

Your code will looking something like this:

function Component() {
    const fetcher = useFetcher();

    const handleSelect = (selectedValue) => {
        // programmatically submit a useFetcher form in Remix
        fetcher.submit({ selected: selectedValue }, { method: "post", action: "/");
    };

    return (
        <Select onSelect={handleSelect} />
    );
}

回复收藏 0 原文