在没有 POST 的情况下处理 Remix.run 中的操作

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

但是，对于其他诸如...拖放组件之类的操作，将如何触发该操作，拖放后应在何处触发操作发布

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