remix.run - 如何使 HTML 选择标签与 Remix Form 一起使用？

Question

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

Answer 1

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

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

import { Form } from 'remix';

如果您的错误仍然存​​在，那么我假设您的 ref 触发了formHTML 元素的默认行为，这就是为什么提交表单会触发整个页面重新加载。要以编程方式提交 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} />
    );
}