Remix 提交表单 onChange 并从 useActionData() 获取实时更新

Question

我正在尝试创建一个混音页面，当我更改标签时我想在其中获得实时预览Select。它正在通过一个表单，因为我希望它翻译数据。

我的问题的解决方案可能是使preventDefault（第一个代码示例）工作或找到一种方法使useActionData()（第二个代码示例）在使用时工作useFetcher

使用此代码，preventDefault不起作用。我需要preventDefault努力使选择器不会重置。我可以使操作函数也发送名称，以便从操作函数导入 select 中的 DefaultValue，但这将成为一个大表单，我不想刷新整个页面。

export async function action({ request }: ActionArgs) {
    const form = new URLSearchParams(await request.text())
    const name = form.get('name');
    console.log('name', name);
    return json({ message: name ? `Hello ${name}!` : 'Select name' });
}

export default function Page() {
    const actionData = useActionData();
    console.log('actionData', actionData);

    return (
        <>
            <Form method="post">

                <h1>{actionData ? actionData.message : 'Select name.'}</h1>

                <select 
                    name="name" 
                    onChange={e => {
                        e.preventDefault();
                        e.target.form.submit();
                    }}
                >
                    <option value="name 1">Name 1</option>
                    <option value="name 2">Name 2</option>
                    <option value="name 3">Name 3</option>
                </select>

                <button type="submit" className="bg-blue-500 text-white font-bold py-2 px-4">
                    Submit
                </button>

                </Form>
        </>
    );
}

我也尝试过使用以下https://github.com/remix-run/remix/issues/1807useRef and useFetcher，但即使操作函数运行，它也会undefined 在记录 actionData 时给我。

export async function action({ request }: ActionArgs) {
    const form = new URLSearchParams(await request.text())
    const name = form.get('name');
    console.log('name', name);
    return json({ message: name ? `Hello ${name}!` : 'Select name' });
}

export default function Page() {
    const actionData = useActionData();
    console.log('actionData', actionData); // Gives undefined

    const formRef = useRef<HTMLFormElement>(null);
    const fetcher = useFetcher();

    return (
        <>
            <fetcher.Form method="post" ref={formRef}>

                <h1>{actionData ? actionData.message : 'Select name.'}</h1>

                <select 
                    name="name" 
                    onChange={() => {
                        fetcher.submit(formRef.current);
                    }}
                >
                    <option value="name 1">Name 1</option>
                    <option value="name 2">Name 2</option>
                    <option value="name 3">Name 3</option>
                </select>

                <button type="submit" className="bg-blue-500 text-white font-bold py-2 px-4">
                    Submit
                </button>

            </fetcher.Form >
        </>
    );
}

Answer 1

我找到了一个解决方案，那就是使用 fetcher.load，然后将其作为自己的加载程序文件。

主文件test.tsx：

import { useFetcher } from '@remix-run/react';

export default function Page() {
    const fetcher = useFetcher();
    return (
        <>
            <div>
                <h1>{fetcher.data ? fetcher.data.message : 'Select name.'}</h1>

                <select
                    name="name"
                    onChange={e => {
                        fetcher.load(`loader/?name=${e.target.value}`);
                    }} 
                >
                    <option value="name 1">Name 1</option>
                    <option value="name 2">Name 2</option>
                    <option value="name 3">Name 3</option>
                </select>

                <button type="submit" className="bg-blue-500 text-white font-bold py-2 px-4">
                    Submit
                </button>
            </div>
        </>
    );
}

加载器文件loader.ts：

import type { LoaderArgs } from '@remix-run/node';
import { json } from '@remix-run/node';

export async function loader({ request }: LoaderArgs) {
    const form = new URLSearchParams(await request.text());
    const name = form.get('name');
    return json({ message: name ? `Hello ${name}!` : 'Select name' });
}