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

Question

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

Answer 1

提交 Remix 表单的最简单方法是使用提交按钮。我假设在这种情况下您不需要提交按钮，而是在 select?

上提交

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

import { Form } from 'remix';

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

您的代码将如下所示：

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} />
    );
}

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

How do make HTML select tag work with Remix Form?

remix.run