在Remix.run中不使用POST处理操作

Question

我阅读了Remix关于动作的文档，并且我在操作中可以找到的大多数信息是它使用表单POST和按钮提交来触发操作。

export default function Game() {
    const counter = useLoaderData();

    return (
        <>
            <div>{counter}</div>
            <div>
                <Form method="post">
                    <button type="submit">click</button>
                </Form>
            </div>
        </>
    );
}

然而，在其他事情上，如何触发这种行动呢？拖放组件，放置后应触发操作post。

Answer 1

useSubmit应该做你想做的事。

一个来自文档的例子

import { useSubmit, useTransition } from "remix";

export async function loader() {
  await getUserPreferences();
}

export async function action({ request }) {
  await updatePreferences(await request.formData());
  return redirect("/prefs");
}

function UserPreferences() {
  const submit = useSubmit();
  const transition = useTransition();

  function handleChange(event) {
    submit(event.currentTarget, { replace: true });
  }

  return (
    <Form method="post" onChange={handleChange}>
      <label>
        <input type="checkbox" name="darkMode" value="on" />{" "}
        Dark Mode
      </label>
      {transition.state === "submitting" ? (
        <p>Saving...</p>
      ) : null}
    </Form>
  );
}