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

【问题标题】：How to make HTML select tag work with Remix Form?如何使 HTML 选择标签与 Remix Form 一起使用？
【发布时间】：2022-08-22 22:43:56
【问题描述】：

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

标签： remix.run

【解决方案1】：

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

确保您使用的是实际的 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} />
    );
}

【讨论】：