颜色选择输入框

chenxt
1 parent ebc96979
Showing 1 changed file with 46 additions and 24 deletions
src/mes/common/commonModelComponent/index.js
 /* eslint-disable */
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState, useCallback, memo } from "react";
 import moment from "moment";
 import { cloneDeep } from "lodash";
-import { Tabs, Modal, Space, Button, DatePicker, Radio, message, Avatar, Row, Col, Table } from "antd";
+import { Tabs, Modal, Space, Button, DatePicker, Radio, message, Avatar, Row, Col, Table, Input } from "antd";
 import * as commonUtils from "@/utils/utils";
 import * as commonConfig from "@/utils/config";
 import * as commonServices from "@/services/services";
@@ -3487,6 +3487,34 @@ const TaskConfirmModal = props =&gt; {
   );
 };
+// 板数输入框:本地 state 维护输入值,仅 blur 时同步到父级,避免输入过程中表格重渲染导致失焦
+const PlateNumInput = memo(({ value, sId, onCommit }) => {
+  const [inputValue, setInputValue] = useState(value || 0);
+
+  // 父级 value 变化时同步本地(本行 blur 提交后或外部改动)
+  useEffect(() => {
+    setInputValue(value || 0);
+  }, [value]);
+
+  const handleChange = (e) => {
+    const filtered = (e.target.value || '').toString().replace(/[^\d]/g, '');
+    setInputValue(filtered);
+  };
+
+  const handleBlur = () => {
+    onCommit(inputValue, sId);
+  };
+
+  return (
+    <Input
+      value={inputValue}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      style={{ width: '120px', border: '1px solid #d9d9d9', borderRadius: '4px' }}
+    />
+  );
+});
+
 const SisColorChooseComponent = props => {
   const { sisColorChooseVisible, sisColorField, sisTableName, controlSelectedRowId } = props;
@@ -3517,6 +3545,18 @@ const SisColorChooseComponent = props =&gt; {
       setRightData([]);
     }
   }, [props.sisColorSelectedData, props.sisColorChooseVisible, sisTableName, controlSelectedRowId, sisColorField, props])
+
+  // 注意:此处 useCallback 必须在下面的 early return 之前调用,否则会违反 Rules of Hooks
+  const handlePlateNumChange = useCallback((value, sId) => {
+    const numValue = (value || '').toString().replace(/[^\d]/g, '');
+    setRightData(prev => prev.map(item => {
+      if (item.sId === sId) {
+        return { ...item, dColor: Number(numValue) };
+      }
+      return item;
+    }));
+  }, []);
+
   if (!sisColorChooseVisible) return "";
   const handleClose = () => {
@@ -3666,34 +3706,16 @@ const SisColorChooseComponent = props =&gt; {
     },
   ];
-  const handlePlateNumChange = (value, record) => {
-    const numValue = value.replace(/[^\d]/g, '');
-    const newData = rightData.map(item => {
-      if (item.sId === record.sId) {
-        return { ...item, dColor: Number(numValue) || 0 };
-      }
-      return item;
-    });
-    setRightData(newData);
-  };
-
   const rightColumns = [
     ...baseColumns.map(col => {
       if (col.dataIndex === 'dColor') {
         return {
           ...col,
           render: (text, record) => (
-            <input
-              type="text"
-              value={text || 0}
-              onChange={(e) => handlePlateNumChange(e.target.value, record)}
-              style={{
-                width: '120px',
-                padding: '4px 8px',
-                border: '1px solid #d9d9d9',
-                borderRadius: '4px',
-                fontSize: '14px'
-              }}
+            <PlateNumInput
+              value={text}
+              sId={record.sId}
+              onCommit={handlePlateNumChange}
             />
           )
         };