Remix技术问答：如何在表单中使用受控输入组件？

核心思路 #

Remix的action通过FormData读取表单值，不管组件多复杂，只要能把最终值同步到原生表单控件（比如隐藏输入、普通输入），就能被action捕获。下面是几种实用方案：

1. 隐藏输入同步法（最通用） #

给复杂受控组件搭配一个隐藏的<input>，实时把组件的状态同步到这个输入的value上。这种方法适配所有受控组件，不管是自定义还是第三方库的。

比如标签列表组件的实现：

import { useState } from "react";
import { Form } from "@remix-run/react";

export default function TagForm() {
  const [tags, setTags] = useState([]);

  const addTag = (tag) => setTags([...tags, tag]);
  const removeTag = (index) => setTags(tags.filter((_, i) => i !== index));

  return (
    <Form method="post">
      {/* 自定义标签UI */}
      <div>
        {tags.map((tag, index) => (
          <span key={index}>
            {tag}
            <button type="button" onClick={() => removeTag(index)}>×</button>
          </span>
        ))}
        <input
          type="text"
          onKeyDown={(e) => {
            if (e.key === "Enter" && e.target.value.trim()) {
              addTag(e.target.value.trim());
              e.target.value = "";
            }
          }}
          placeholder="添加标签"
        />
      </div>

      {/* 隐藏输入，同步标签数组 */}
      <input
        type="hidden"
        name="tags"
        value={JSON.stringify(tags)}
      />

      <button type="submit">提交</button>
    </Form>
  );
}

对应的action解析逻辑：

export async function action({ request }) {
  const formData = await request.formData();
  const tags = JSON.parse(formData.get("tags") || "[]");
  // 后续处理逻辑...
  return json({ success: true, tags });
}

2. 绑定原生表单控件（组件支持时优先用） #

很多第三方复杂组件（比如日期范围选择器）可以直接和原生输入控件绑定，或者内部包含原生输入。只需要给这些原生输入设置name属性，就能直接在action里拿到值。

比如日期范围选择器的示例：

import { Form } from "@remix-run/react";
import DateRangePicker from "第三方日期范围组件";
import { useState } from "react";

export default function DateForm() {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  return (
    <Form method="post">
      {/* 第三方日期范围组件，同步状态 */}
      <DateRangePicker
        startDate={startDate}
        endDate={endDate}
        onStartDateChange={(date) => setStartDate(date)}
        onEndDateChange={(date) => setEndDate(date)}
      />

      {/* 绑定原生隐藏输入，设置name */}
      <input
        type="hidden"
        name="startDate"
        value={startDate?.toISOString() || ""}
      />
      <input
        type="hidden"
        name="endDate"
        value={endDate?.toISOString() || ""}
      />

      <button type="submit">提交</button>
    </Form>
  );
}

action直接取值：

export async function action({ request }) {
  const formData = await request.formData();
  const startDate = formData.get("startDate");
  const endDate = formData.get("endDate");
  // 后续处理...
  return json({ success: true, startDate, endDate });
}

3. 手动构建FormData提交（特殊场景） #

如果不想用隐藏输入，可以在提交表单时，手动把复杂组件的状态添加到FormData里，再调用Remix的useSubmit钩子提交。

import { useState } from "react";
import { Form, useSubmit } from "@remix-run/react";

export default function CustomForm() {
  const submit = useSubmit();
  const [complexValue, setComplexValue] = useState({
    items: [],
    range: { min: 0, max: 100 }
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append("complexValue", JSON.stringify(complexValue));
    submit(formData, { method: "post" });
  };

  return (
    <Form onSubmit={handleSubmit}>
      {/* 自定义复杂UI，控制complexValue状态 */}
      <div>
        {/* 你的复杂组件逻辑 */}
      </div>

      <button type="submit">提交</button>
    </Form>
  );
}

关键注意事项 #

• 对于非字符串类型的值（数组、对象），必须用JSON.stringify转成字符串，action里再用JSON.parse解析，因为FormData只能存储字符串或文件。
• 确保复杂组件的状态和表单控件实时同步，比如添加/删除标签、修改日期时立刻更新对应输入的value。
• 第三方组件优先看文档有没有原生表单集成方案，很多UI库（如MUI、Chakra UI）的表单组件支持直接设置name属性，无需额外隐藏输入。

内容的提问来源于stack exchange，提问作者florian norbert bepunkt