Ark UI 中 Select 组件 defaultValue 设置问题解析

在 React 项目中使用 Ark UI 的 Select 组件时，开发者可能会遇到 defaultValue 无法正确设置初始值的问题。本文将深入分析这一现象的原因，并提供完整的解决方案。

问题现象

当开发者按照 Ark UI 文档示例，尝试通过 React Hook Form 的 defaultValues 属性为 Select 组件设置默认值时，发现组件并未显示预期的初始值。具体表现为：

1. 在 useForm 中设置了 defaultValues.framework 为 'React'
2. 组件渲染后 Select 框仍然显示 placeholder 文本
3. 表单提交时却能正确获取到默认值

核心原因

这个问题源于 Ark UI Select 组件与表单库集成的特殊机制。Select 组件实际上由两部分组成：

1. 可见的 UI 部分（Select.ValueText 等）
2. 隐藏的原生 select 元素（HiddenSelect）

默认值只被设置到了隐藏的原生 select 元素上，而没有同步到可见的 UI 部分。

完整解决方案

要正确设置 Select 组件的默认值，需要同时处理两个方面：

1. 通过 React Hook Form 设置表单默认值
2. 通过 Ark UI 的 defaultValue 属性同步 UI 状态

以下是修正后的代码示例：

export const FormLibrary = () => {
  const collection = createListCollection({ items: ['React', 'Solid', 'Vue'] })

  const { register, handleSubmit } = useForm<Inputs>({
    defaultValues: {
      framework: 'React',
    },
  })

  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <ArkSelect.Root 
        collection={collection}
        defaultValue={['React']} // 关键修复点
      >
        <ArkSelect.Label>Framework</ArkSelect.Label>
        <ArkSelect.HiddenSelect {...register('framework')} />
        {/* 其余组件代码保持不变 */}
      </ArkSelect.Root>
    </form>
  )
}

技术原理

1. 双向绑定机制：Ark UI 的 Select 组件设计为受控组件，需要显式声明其值或默认值
2. 分离设计：表单库只管理数据状态，UI 组件管理视觉状态，两者需要显式同步
3. 集合类型处理：ArkSelect.Root 的 defaultValue 需要以数组形式提供，即使单选也是如此

最佳实践建议

1. 对于表单集成场景，始终同时设置表单库的 defaultValues 和组件的 defaultValue
2. 使用 TypeScript 确保类型安全，defaultValue 类型应与集合项类型匹配
3. 对于多选场景，defaultValue 数组包含所有默认选中项
4. 在复杂表单中，考虑使用 watch 方法监控值变化并手动更新 UI 状态

兼容性说明

此解决方案适用于：

• Ark UI 4.5.0 及以上版本
• React Hook Form 7.x 及以上版本
• 支持 TypeScript 和 JavaScript 项目

通过理解 Ark UI Select 组件的这种设计模式，开发者可以更好地处理表单集成中的各种状态同步问题，构建更健壮的表单交互体验。