ProFormText失焦时,将输入的值,清空前后空格trim

2 阅读1分钟

只贴部分代码

onBlur: handleTrim('testifyOrderReceiveInfo','email'),

form的结构是

{
  testifyOrderReceiveInfo: { email: '' }
}

表单绑定字段时,这么写name={['testifyOrderReceiveInfo', 'email']}就可以获得结构化的form表单对象


  const renderElectronicFields = useCallback(
    () => (
      <ProFormText
        name={['testifyOrderReceiveInfo', 'email']}
        label="电子邮箱"
        rules={[
          validationRules.required('请输入电子邮箱'),
          validationRules.maxLength(64, '电子邮箱最多64个字'),
          validationRules.email,
        ]}
        fieldProps={{
          onBlur: handleTrim('testifyOrderReceiveInfo','email'),
        }}
      />
    ),
    [handleTrim],
  );
  
  
    // Trim 函数
  const handleTrim = useCallback(
    (fieldName: any, subFieldName) => (e: React.FocusEvent<HTMLInputElement>) => {
      if(!fieldName) return
      const value = e.target.value.trim();

      const obj = form.getFieldsValue([fieldName]);
      const aimObj = obj[fieldName];

      if (!aimObj) return;
      aimObj[subFieldName] = value;

      form.setFieldsValue({
        [fieldName]: aimObj, // 使用动态键名
      });
    },
    [form],
  );