React+Kendo UI Grid按字段限制输入长度的实现方案

首先定义一个字段长度限制的配置对象，方便统一管理不同字段的规则：

const fieldLengthLimits = {
  smallNumber: 3,
  stationDescription: 15
};

接下来修改onItemChange函数，在更新数据前加入字段长度校验逻辑：

const itemChange = (event) => {
  const { field, value, dataItem } = event;
  
  // 跳过无字段或不在限制配置中的情况
  if (!field || !fieldLengthLimits[field]) {
    const newData = dataField.map(item =>
      item.dataFieldID === dataItem.dataFieldID
        ? { ...item, [field]: value, changed: true }
        : item
    );
    setDataField(newData);
    return;
  }

  // 将值转为字符串，统一处理长度判断（兼容数字/字符串输入）
  const valueStr = String(value);
  const maxLength = fieldLengthLimits[field];

  // 校验长度，符合要求才更新数据
  if (valueStr.length <= maxLength) {
    const newData = dataField.map(item =>
      item.dataFieldID === dataItem.dataFieldID
        ? { ...item, [field]: value, changed: true }
        : item
    );
    setDataField(newData);
  }
  // 超出长度则不执行状态更新，也可在此添加提示逻辑（如alert）
};

逻辑说明 #

• 用配置对象集中管理字段限制，后续新增或修改规则只需调整该对象，无需改动校验逻辑
• 先判断当前字段是否在限制列表中，非目标字段直接按原有逻辑更新
• 把输入值转为字符串，确保数字类型的smallNumber也能正确判断位数
• 只有当输入值长度符合对应字段的限制时，才更新数据源状态；超出长度则忽略本次修改

如果需要给用户反馈，可在长度校验不通过的分支里加入提示，比如：

if (valueStr.length > maxLength) {
  alert(`字段${field}最多输入${maxLength}个字符`);
}

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