SvelteKit中Use:Enhance下phonetextbox子组件绑定值提交丢失问题

1. 让子组件支持双向绑定 #

子组件phonetextbox.svelte不能仅依赖内部状态，必须通过export let暴露可绑定的属性，确保父组件能传递并同步值：

<!-- phonetextbox.svelte -->
<script>
  export let value = '';
</script>

<input 
  type="text" 
  bind:value 
  placeholder="(XXX)-XXX-XXXX"
/>

2. 父组件绑定服务器返回的默认值 #

在父组件（+page.svelte）中，将+page.server.js返回的默认值直接绑定到子组件的value属性：

<!-- +page.svelte -->
<script>
  export let data;
  // 初始化表单数据为服务器返回的默认手机号
  let formState = { phone: data.defaultPhone };
</script>

<form method="POST" use:enhance>
  <Phonetextbox bind:value={formState.phone} />
  <p>当前绑定值：{formState.phone}</p>
  <button type="submit">提交</button>
</form>

3. 自定义use:enhance回调同步服务器返回值 #

如果提交后服务器返回了更新后的默认值，需要在use:enhance的回调里手动更新绑定的状态，强制子组件同步：

<script>
  import { enhance } from '$app/forms';
  export let data;
  let formState = { phone: data.defaultPhone };

  const submitHandler = async ({ form, action, cancel }) => {
    const res = await fetch(action, {
      method: 'POST',
      body: new FormData(form)
    });

    if (res.ok) {
      const result = await res.json();
      // 更新表单状态，子组件会自动同步
      formState.phone = result.updatedPhone || formState.phone;
    }
    return cancel();
  };
</script>

<form method="POST" use:enhance={submitHandler}>
  <Phonetextbox bind:value={formState.phone} />
  <button type="submit">提交</button>
</form>

4. 排查子组件格式化逻辑干扰 #

如果子组件有手机号格式化逻辑（比如自动添加括号、横杠），要确保格式化不会覆盖绑定的原始值：

<!-- phonetextbox.svelte -->
<script>
  export let value = '';
  // 仅做显示层格式化，不修改绑定的原始值
  $: displayValue = value.replace(/(\d{3})(\d{3})(\d{4})/, '($1)-$2-$3');
</script>

<input 
  type="text" 
  value={displayValue}
  on:input={(e) => value = e.target.value.replace(/[^\d]/g, '')}
/>

核心注意点 #

• 子组件必须通过export let暴露可绑定属性，不能孤立使用内部状态
• 父组件要确保服务器默认值直接绑定到子组件的属性上，而非仅在子组件内部设置默认值
• 使用use:enhance时，若服务器返回新数据，需手动更新绑定的状态，触发子组件重新渲染

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