ソースを参照

add memory disabled btn status

tianyunperfect 5 年 前
コミット
1c5aefe1de
1 ファイル変更5 行追加1 行削除
  1. 5 1
      src/pages/Memory/components/UpdateForm.tsx

+ 5 - 1
src/pages/Memory/components/UpdateForm.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
 import {Button, message, Modal} from 'antd';
 import {TableListItem} from '../../MemoryList/data.d';
 import Quill from "@/pages/Memory/components/Quill";
@@ -18,6 +18,7 @@ export interface UpdateFormProps {
 
 
 const UpdateForm: React.FC<UpdateFormProps> = (props) => {
+  const [btnDisable, setBtnDisable] = useState(false);
 
   const [formValues, setFormValues] = useSingleState<TableListItem>({
     back: "",
@@ -70,6 +71,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
         <p/>
         <Button
           type="primary"
+          disabled={btnDisable}
           onClick={async () => {
             if (getTextFromHtml(formValues.front + formValues.back).length <= 1) {
               message.info("你是不是没有输入文字?");
@@ -79,12 +81,14 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
               message.info("文字太长了,减少一些吧!");
               return;
             }
+            setBtnDisable(true); // 禁用按钮
             let res;
             if (formValues.id != undefined) {
               res = await service.update(formValues);
             } else {
               res = await service.insert(formValues);
             }
+            setBtnDisable(false); // 释放按钮
             if (res.success) {
               message.info('操作成功');
               if (formValues.id != undefined) {