ReactJS表单手机号数字验证onChange事件绑定报错排查

你遇到的报错和功能失效是几个写法错误导致的：

• onChange绑定错误：给手机号输入框传的onChange: {handleChange}是把函数包在了对象字面量里，React触发事件时拿到的是对象而非可执行函数，直接抛出originalOnChangeEvent is not a function错误。
• handleChange逻辑完全不生效：
  • 写了updateCustomerInfoValues但没有加括号调用，也没有传参，状态根本不会更新
  • 误用了不存在的state、setState变量，组件内没有定义这两个API，代码运行直接报错
  • 错误对象是普通常量而非响应式状态，就算修改了值也不会触发页面重渲染，提示出不来
  • 多余的event.preventDefault()会阻断输入框的默认输入行为，导致输入异常
  • 校验逻辑写错了校验对象，错误字段也挂载错了位置
• JSX语法错误：组件返回了多个同级根元素，没有包裹节点会直接报编译错误
• 缺少错误提示渲染节点：代码里根本没有写警告文本的渲染位置，就算校验通过也看不到提示

1. 用useState定义响应式的错误状态，替换原来的普通常量
2. 修正handleChange逻辑：先调用reducer同步表单值，再针对当前输入值做正则校验，更新错误状态
3. 修正onChange绑定，直接传入函数引用，不要包裹对象
4. 在手机号输入框下方加错误提示节点，有错误时显示红色文本
5. 给返回的JSX加根节点包裹，修复语法错误

修复后的CustomerFields.jsx代码 #

import React, { useState } from 'react';

const CustomerFields = (props) => {
  const {
    customerInfo,
    updateCustomerInfoValues
  } = props;
  // 响应式管理表单错误
  const [errors, setErrors] = useState({
    firstName: '',
    phoneNumber: '',
    userEmail: '',
  });

  function handleChange(event){
    const { name, value } = event.target;
    // 调用reducer更新表单值，参数格式匹配你的formUpdateFieldValues逻辑即可
    updateCustomerInfoValues({ name, value });

    const updatedErrors = { ...errors };
    // 校验当前输入的手机号值
    if (name === 'phoneNumber' && !/^[0-9\b]*$/.test(value)) {
      updatedErrors.phoneNumber = 'Only numbers!';
    } else {
      updatedErrors.phoneNumber = '';
    }
    setErrors(updatedErrors);
  }

  return (
    <>
      <div className="caption font-large">Customer Data</div>
      <div className="customer-input-field">
        <InputField
          inputType="text"
          fieldName="firstName"
          label="FirstName"
          htmlAttributes={{
            onChange: (e) => updateCustomerInfoValues({
              name: e.target.name, 
              value: e.target.value
            }),
            value: customerInfo.firstName,
            name: 'firstName'
          }}
        />
        <div className="phone-field-wrapper">
          <InputField
            inputType="text"
            fieldName="phoneNumber"
            label="Phone Number"
            htmlAttributes={{
              onChange: handleChange,
              value: customerInfo.phoneNumber,
              name: 'phoneNumber'
            }}
          />
          {/* 错误提示 */}
          {errors.phoneNumber && (
            <span style={{ color: 'red', fontSize: '12px', marginTop: '4px', display: 'block' }}>
              {errors.phoneNumber}
            </span>
          )}
        </div>
      </div>
    </>
  );
};

export default CustomerFields;

注意事项 #

• 如果你写的formUpdateFieldValues reducer要求的action格式和示例中不同，调整updateCustomerInfoValues的传参即可。
• 自定义InputField组件需要把htmlAttributes里的所有属性透传到原生input元素上，否则事件和值绑定不会生效。
• MainForm中用到的result.customerInfo需要提前定义，否则会报变量未定义错误。

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