在沒有 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>
  );
}