EditModal优化

src/components/EditModal/index.tsx

@@ -82,17 +82,22 @@ const EditModal: React.FC<EditModalProps> = ({
         new_value
       );
     setIsIllegal(illegal);
-    // 验证输入
-    const valid =
-      new_value.length >= 2 &&
-      new_value.length <= maxLength &&
-      !ishasIllegal &&
-      !illegal &&
-      canEdit;
-    setIsValid(valid);
   };
 
+  useEffect(() => {
+    const valid =
+      value.length >= 2 &&
+      value.length <= maxLength &&
+      !hasIllegal &&
+      !isIllegal &&
+      canEdit;
+    setIsValid(valid);
+  }, [
+    value, hasIllegal, isIllegal, canEdit
+  ])
+
   const handle_save = () => {
+    console.log("savexxxxxxx", isIllegal, hasIllegal, !isValid)
     if (isIllegal) {
       Taro.showToast({
         title: "输入的字符非法",
@@ -100,18 +105,17 @@ const EditModal: React.FC<EditModalProps> = ({
         duration: 2000,
       });
       return;
-    }
-    if (hasIllegal) {
+    } else if (hasIllegal) {
+      console.log("hasIllegal")
       Taro.showToast({
         title: "内容不能包含@<>/等无效字符",
         icon: "none",
-        duration: 2000,
+        duration: 4000,
       });
       return;
-    }
-    if (!isValid) {
+    } else if (!isValid) {
       Taro.showToast({
-        title: validationMessage || `请填写 2-${maxLength} 个字符`,
+        title: `请填写 2-${maxLength} 个字符`,
         icon: "none",
         duration: 2000,
       });
@@ -122,6 +126,9 @@ const EditModal: React.FC<EditModalProps> = ({
 
   const handle_cancel = () => {
     setValue(initialValue);
+    setHasIllegal(false);
+    setIsIllegal(false);
+    setCanEdit(true);
     onCancel();
   };
 
@@ -169,13 +176,12 @@ const EditModal: React.FC<EditModalProps> = ({
                   confirmType="done"
                   // autoFocus={true}
                   onConfirm={handle_save}
-                  onBlur={() => {}}
+                  onBlur={(e) => { e.preventDefault() }}
                 />
                 <View className="char_count">
                   <Text
-                    className={`count_text ${
-                      value.length > maxLength && "un-valid"
-                    }`}
+                    className={`count_text ${value.length > maxLength && "un-valid"
+                      }`}
                   >
                     {value.length}/{maxLength}
                   </Text>
@@ -202,9 +208,8 @@ const EditModal: React.FC<EditModalProps> = ({
                 />
                 <View className="char_count">
                   <Text
-                    className={`count_text ${
-                      value.length > maxLength && "un-valid"
-                    }`}
+                    className={`count_text ${value.length > maxLength && "un-valid"
+                      }`}
                   >
                     {value.length}/{maxLength}
                   </Text>