React表单中如何让Zod将输入识别为数字而非文本？

问题原因 #

React中<input type="number"/>的event.target.value始终返回字符串类型，哪怕用户输入的是数字。你的代码里错误地将这个字符串类型的值直接赋值给state的age字段，导致提交时Zod的z.number()验证规则触发错误。

解决方案（二选一即可） #

方案1：在输入变更时手动转换类型

修改React组件中age输入框的handleChange函数，将字符串转为数字后再更新state：

<Input
  label="Age "
  id="age"
  value={data.age}
  type="number"
  handleChange={(e: { target: { value: string } }) => {
    // 处理空输入，避免NaN，空值时设为0或你需要的默认值
    const numValue = e.target.value ? parseInt(e.target.value, 10) : 0;
    setData({ ...data, age: numValue });
  }}
/>

注意：要修正handleChange的参数类型声明，e.target.value实际是字符串类型，之前的number类型声明不符合React输入框的实际行为。

方案2：修改Zod Schema自动转换类型

使用Zod的coerce.number()替代z.number()，它会自动尝试将输入的字符串转为数字后再执行验证：

export const creditCardData = z.object({
    firstName: z.string().min(3, '最小长度为3').max(10, '最大长度为10'),
    age: z.coerce.number().min(1).max(99).int()
})

这种方式更简洁，无需修改组件逻辑，Zod会自动处理类型转换，即使state中的age是字符串也能通过验证。

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