Zag.js 数字输入组件国际化问题解析

问题背景

在使用Zag.js构建国际化应用时，开发者在处理数字输入组件时遇到了一个典型问题：当使用非默认区域设置（如塞尔维亚语'sr-RS'）时，通过api.setValue()方法设置数值时会出现小数点格式异常的情况。

问题现象

在塞尔维亚语区域设置下，数字的小数点应显示为逗号","。初始加载时组件显示正常，增/减按钮也能正确处理数字格式。但当通过外部重置按钮更新数值时，组件内部的小数点格式会丢失，导致显示异常。

技术分析

这个问题的本质在于JavaScript中数字类型与本地化字符串之间的转换处理不当。当开发者尝试通过api.setValue()设置数值时，如果直接传递数字类型，组件会丢失原有的本地化格式信息。

解决方案

正确的处理方式应该是：

1. 保持字符串格式：避免在组件内外进行不必要的数字类型转换，始终以本地化字符串形式传递数值。

2. 双向数据绑定：在Svelte组件中，使用bindable属性来保持父组件和子组件之间的数据同步。

3. 区域设置感知：在组件初始化时，明确指定locale参数和formatOptions，确保数字格式符合预期。

实现示例

<script lang="ts">
  import * as numberInput from "@zag-js/number-input"
  import { normalizeProps, useMachine } from "@zag-js/svelte"

  type Props = {
    parentValue: string;
  }

  let { parentValue = $bindable() } = $props();

  const id = $props.id()
  const service = useMachine(numberInput.machine, {
    id,
    locale: 'sr-RS',
    get value() {
      return parentValue
    },
    defaultValue: parentValue.toLocaleString('sr-RS'),
    formatOptions: {
      minimumFractionDigits: 4,
      maximumFractionDigits: 4
    },
    onValueChange(details) {
      parentValue = details.value
    } 
  });
  const api = $derived(numberInput.connect(service, normalizeProps));
</script>

父组件调用方式：

<script>
  import NumberInput from "./number-input.svelte";
  let numberValue = $state('1.234');
</script>

<NumberInput bind:parentValue={numberValue}/>
<button onclick={() => {numberValue = '1.234'}}>Reset</button>

最佳实践建议

1. 避免类型转换：在处理本地化数字时，尽量保持字符串形式，减少数字类型的中间转换。

2. 明确格式要求：通过formatOptions明确指定小数位数等格式要求，确保显示一致性。

3. 双向数据流：建立清晰的父子组件数据流，确保状态变更能够正确传播。

4. 区域设置一致性：确保应用中的所有数字输入组件使用相同的区域设置，避免混淆。

通过遵循这些原则，开发者可以避免国际化数字输入中的常见问题，构建出更加健壮的国际化应用。