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 随心所欲。

这是来自 docs

的示例

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

Remix.run 没有 POST 的处理操作

Handling action in Remix.run without POST

javascript

node.js

reactjs

remix.run