Mantine中如何将use-form与Select组件结合处理数值类型选项？

方案1：通过useForm的parse/transform全局自动转换 #

在初始化表单时配置类型转换规则，让表单内部自动处理字符串与数值的双向映射，无需手动修改每个字段：

const form = useForm({
  initialValues: { 
    option: 1 // 数据库返回的数值类型
  },
  // 初始化/设置值时，将数值转为字符串适配Select组件
  parse: (values) => ({
    ...values,
    option: String(values.option)
  }),
  // 提交表单时，将字符串转回数值存入数据库
  transform: (values) => ({
    ...values,
    option: Number(values.option)
  })
});

配置后，表单内部维护的是字符串类型（适配Select），提交时自动转为数值，完全不需要在组件层面手动处理转换。

方案2：用Controller组件实现单字段精准控制 #

如果只需要针对单个Select做处理，使用Controller组件包裹Select，显式处理值的双向转换：

import { Controller } from '@mantine/form';

// 组件内使用
<Controller
  name="option"
  control={form.control}
  render={({ field }) => (
    <Select
      label="Option"
      value={String(field.value)}
      onChange={(selectedValue) => field.onChange(Number(selectedValue))}
      {/* 其他Select配置项 */}
    />
  )}
/>

方案3：封装通用NumberSelect组件复用转换逻辑 #

如果项目中有多个类似场景，封装一个通用组件统一处理数值与字符串的转换，避免重复代码：

import { Select } from '@mantine/core';

const NumberSelect = (props) => {
  return (
    <Select
      {...props}
      value={String(props.value)}
      onChange={(value) => props.onChange?.(Number(value))}
    />
  );
};

// 使用时直接替换原Select
<NumberSelect
  label="Option"
  {...form.getInputProps("option")}
/>

内容的提问来源于stack exchange，提问作者K. D.