小编Son*_*dge的帖子

我正在尝试创建一个混音页面，当我更改标签时我想在其中获得实时预览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();
                    }}
                > …