React Hook Form复用组件输入始终返回字符串类型问题求助

原生input的value属性始终是字符串类型，React Hook Form默认不会自动根据input的type转换值的类型，所以哪怕你设置了type="number"，表单拿到的还是字符串。要解决这个问题，我们可以在register方法里添加transform转换函数，根据传入的type属性来处理值的类型。

修改后的可复用Input组件 #

import React from "react";

const Input = (props) => {
  const { register, rules, name, type } = props;
  
  // 根据输入类型生成对应的转换逻辑
  const getTransform = () => {
    if (type === 'number') {
      // 空输入返回undefined，非空值转为数字，避免出现NaN
      return (value) => value === '' ? undefined : Number(value);
    }
    // 其他类型（如text、email等）保持原字符串格式
    return (value) => value;
  };

  // 合并原有规则和转换函数
  const mergedRules = {
    ...rules,
    transform: getTransform()
  };

  return (
    <input
      type={type}
      {...props}
      {...(register && register(name, mergedRules))}
    />
  );
};

export default Input;

关键说明 #

• 当type为number时，transform函数会把输入值转为数字类型，空输入时返回undefined（避免表单中出现无效的NaN值）。
• 其他类型的输入保持原字符串格式，不做额外转换。

额外优化：校验有效数字 #

如果担心用户输入非数字内容导致转换后出现NaN，可以在rules里添加validate规则做校验：

<Input
  name="discountValue"
  register={register}
  mandatory={true}
  rules={{
    required: t("Discount value is a required field"),
    min: {
      value: 1,
      message: t("Discount value must be greater than 0"),
    },
    validate: (value) => !isNaN(value) || t("Please enter a valid number")
  }}
  error={errors?.discountValue?.message}
  type="number"
/>

这样修改后，你的Input组件就能根据type属性返回对应类型的输入值了。

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