React调用通用slice截断校验函数后输入框仍可输入超限字符问题

需要对10余个表单字段做值长度校验，截断超出长度限制的输入内容，最初编写的通用截断函数如下：

export const sliceFunction = (e: string, limit: number) => {
  console.log(e.length > limit ? e.slice(0, limit) : '','llllllllllllllllllllllll')
  return e.length > limit ? e.slice(0, limit) : '';
};

在输入框change事件回调中按如下方式调用校验逻辑：

const handleChange =
  (fieldName: keyof EnrollmentFields) =>
  (e: React.ChangeEvent<HTMLInputElement>) => {
    setAlertError(false);
    if (fieldName === 'address2' || fieldName === 'address1') {
      sliceFunction(e.currentTarget.value, 55);
    }
    if (fieldName === 'address3') {
      sliceFunction(e.currentTarget.value, 30);
    }
    if (fieldName === 'phonumber') {
      sliceFunction(e.currentTarget.value, 14);
    }
}

实际运行时出现异常：sliceFunction内部的console.log可以正确打印截断后的结果，函数返回值符合预期，但输入框仍然可以接收超出长度限制的输入内容，无法实现「仅允许输入限制长度内内容、阻止超限内容输入」的效果。

• 调用sliceFunction后没有使用返回值：函数仅计算出了截断后的字符串，既没有将该值更新到表单对应的状态中，也没有修改输入框的实际渲染值，输入框会默认保留用户输入的原始超长内容。
• 截断函数本身逻辑错误：当输入内容长度未超出限制时，函数错误返回空字符串而非原输入值，会导致正常短内容输入时被意外清空。
• 未遵循React受控组件规则：受控输入框的显示内容完全由绑定的状态值决定，仅在change事件中做计算、不更新对应状态，根本无法拦截或修改输入内容。

1. 先修正通用截断函数的逻辑，删除调试用的冗余console代码

export const sliceFunction = (value: string, limit: number) => {
  // 长度未超限直接返回原始输入值，超限才做截断处理
  return value.length > limit ? value.slice(0, limit) : value;
};

2. 修改change事件回调，拿到截断结果后同步更新表单状态

const handleChange =
  (fieldName: keyof EnrollmentFields) =>
  (e: React.ChangeEvent<HTMLInputElement>) => {
    setAlertError(false);
    const rawValue = e.currentTarget.value;
    let finalValue = rawValue;

    // 匹配不同字段的长度限制规则
    if (fieldName === 'address1' || fieldName === 'address2') {
      finalValue = sliceFunction(rawValue, 55);
    }
    if (fieldName === 'address3') {
      finalValue = sliceFunction(rawValue, 30);
    }
    if (fieldName === 'phonumber') {
      finalValue = sliceFunction(rawValue, 14);
    }

    // 关键操作：将截断后的合法值更新到表单状态中
    setEnrollmentFields(prev => ({
      ...prev,
      [fieldName]: finalValue
    }));
  }

3. 给所有输入框绑定对应状态作为value属性，确保状态更新后输入框显示内容同步

// 示例：地址1输入框
<input 
  type="text"
  value={enrollmentFields.address1}
  onChange={handleChange('address1')}
/>

完成以上修改后，用户输入内容一旦超限就会被自动截断，输入框只会展示限制长度内的内容，符合预期效果。

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