React组件限制键盘输入为A-Z及allowForClassification空格触发按钮排查

问题根因 #

控制按钮展示的核心变量allowForClassification由canClassify和classifyInProgress共同决定，其中canClassify的现有校验规则为Object.values(ccceValues).every(Boolean)，仅判断输入值是否为JS真值。而全空格字符串在JS中属于真值，因此用户输入空格时也会触发按钮显示，不符合需求。

修复方案 #

直接修改getCcceValues函数中canClassify的校验逻辑，新增去空格、内容校验规则即可，修改后的代码如下：

const getCcceValues = (object?: FormObjectModel | null) => {
  const ccceInput: $Shape<CcceInput> = {};

  if (!object) {
    return {};
  }

  const ccceValues = object.attributeCollection.questions.reduce(
    (acc, attribute) => {
      const fieldEntry = ccceBeInformedFieldMap.get(attribute.key);

      if (fieldEntry) {
        acc[fieldEntry] = attribute.value;
      }

      return acc;
    },
    ccceInput
  );

  // 修改后的校验规则：要求所有输入值去空格后不为空，且至少包含一个英文字母
  const canClassify = Object.values(ccceValues).every(value => {
    return typeof value === 'string' && value.trim().length > 0 && /[a-zA-Z]/.test(value);
  });

  return { canClassify, ccceValues };
};

规则调整说明 #

• 若需求允许输入包含数字，可将正则/[a-zA-Z]/替换为/[a-zA-Z0-9]/
• 若仅要求输入不为全空格、无字母限制，可删掉正则校验，保留value.trim().length > 0即可

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