如果Field的类型为number,则Redux-form的Field组件不会触发规范化功能

时间:2019-06-11 13:59:12

标签: javascript reactjs redux-form antd

我正在将antd的组件(FormFieldInput)传递给redux-form的Field组件。一切都适用于“文本”和“电话”输入类型。我将字段的类型更改为“数字”后,规范化数字功能便停止工作。

我看到 FormFieldInput component 仅在输入数字时才被触发。当我在输入FormFieldInput控制台中输入字母字符时,函数顶部的日志未返回新值。

规范化器:

const normalizeNumber = (value /* , previousValue */) => {
  console.log('---input', value);
  if (!value) {
    return value;
  }
  const onlyNums = value.replace(/[^\d]/g, '');
  console.log('---output', onlyNums);
  return onlyNums;
};

用法:

<Field
  name="size"
  type="number"
  component={FormFieldInput}
  label="Size"
  placeholder="Size"
  required
  validate={[required, maxLength255]}
  normalize={normalizeNumber}
/>

FormFieldInput:

const FormFieldInput = ({
  input,
  label,
  type,
  placeholder,
  required,
  meta: { touched, error, warning }
}) => {
  const [hasError, setHasError] = useState(false);
  const [hasWarning, setHasWarning] = useState(false);

  console.log('---input', input);

  useEffect(() => {
    setHasError(!!error);
  }, [error]);

  useEffect(() => {
    setHasWarning(!!warning);
  }, [warning]);

  const ref = createRef();

  return (
    <div className="form-item">
      <div className="form-item__label">
        {`${label}:`}
        {required && <span style={{ color: 'red' }}> *</span>}
      </div>
      <div className={`form-item__input`}>
        <AntInput
          {...input}
          ref={ref}
          placeholder={placeholder}
          type={type}
        />
      </div>
    </div>
  );
};

export const AntInput = React.forwardRef((props, ref) => {
  const { placeholder, type, suffix } = props;
  console.log('---type', type);

  return <Input {...props} ref={ref} placeholder={placeholder} type={type} suffix={suffix} />;
});

我希望所有输入数据都通过规范化功能,但是不知何故字母字符正在通过它。

0 个答案:

没有答案