SvelteKit中调用form.submit()时如何保留use:enhance特性？

我有如下Svelte表单，使用use:enhance实现无刷新提交：

<script>
    let form;
    let submitAvatarChangeButton;
</script>


<form 
    bind:this={form}
    method="POST"
    action="?/saveAvatar" 
    enctype="multipart/form-data"
    use:enhance={ async ({ cancel }) => {
        isProcessing = true;

        return async ({ result, update}) => {
            maybeShowError(result);
            isProcessing = false;
            await invalidateAll();
        };
    }
}>
    <!-- Some Input Stuff -->
    <button bind:this={submitAvatarChangeButton} type="submit">Click me</button>
</form>

我尝试用外部按钮编程式调用form.submit()提交表单：

<button 
    type="button" 
    on:click={() => form.submit()}
>
    Submit the form
</button>

表单能提交，但use:enhance的无刷新特性失效，页面会刷新。目前只有点击表单内的提交按钮才能正常工作：

<button 
    type="button" 
    on:click={() => submitAvatarChangeButton.click()}
>
    Submit the form
</button>

但这种方式不够规范，想知道有没有办法直接调用form.submit()时保留use:enhance的特性？

直接调用原生form.submit()不会触发表单的submit事件，而use:enhance是通过监听表单的submit事件来拦截请求、实现无刷新提交的，所以会导致特性失效。你可以用以下两种方法解决：

方法一：手动触发表单的submit事件 #

通过dispatchEvent手动创建并触发submit事件，让use:enhance正常拦截处理：

<button 
    type="button" 
    on:click={() => {
        const submitEvent = new SubmitEvent('submit', { cancelable: true });
        form.dispatchEvent(submitEvent);
    }}
>
    Submit the form
</button>

方法二：复用use:enhance提供的submit函数 #

在use:enhance的回调中获取它提供的submit函数并保存，供外部按钮调用：

<script>
    let form;
    let submitForm; // 保存enhance提供的提交函数

    const enhanceHandler = async ({ cancel, submit }) => {
        submitForm = submit; // 存储submit函数
        isProcessing = true;

        return async ({ result, update}) => {
            maybeShowError(result);
            isProcessing = false;
            await invalidateAll();
        };
    };
</script>

<form 
    bind:this={form}
    method="POST"
    action="?/saveAvatar" 
    enctype="multipart/form-data"
    use:enhance={enhanceHandler}
>
    <!-- Some Input Stuff -->
    <button type="submit">Click me</button>
</form>

<button 
    type="button" 
    on:click={() => submitForm()}
>
    Submit the form
</button>

这两种方式都不需要依赖表单内的提交按钮，同时能完整保留use:enhance的无刷新、状态处理等特性。

内容的提问来源于stack exchange，提问作者Misanthropist