点击单元格时才进入编辑

src/pages/listnew/index.jsx

@@ -201,7 +201,7 @@ const List = (editType) => {
         onMouseLeave={handleMouseLeave}
       >
 
-        {editType.edit == "true" ? <Input type="text" style={{ width: "calc(100% - 70px)" }} defaultValue={props.cellData} /> : props.cellData}
+        <Input type="text" style={{ width: "calc(100% - 70px)" }} defaultValue={props.cellData} />
         {showButton && (
           <div>
             <Tooltip content="更多操作" positioning="below">
@@ -254,7 +254,6 @@ const List = (editType) => {
   ]
 
   const [newTableData, setTabeData] = useState(tableData);
-
   /**
    * 新增空行
    */
@@ -268,6 +267,23 @@ const List = (editType) => {
     }]));
   }
 
+  /**
+   * 记录点击的行
+   */
+  const [editRowId, setEditRowId] = useState(-1);
+  const ChangeEditRowId = (rowId) => {
+    setEditRowId(rowId);
+  }
+
+  /**
+   * 记录点击的列
+   */
+  const [editColumnId, setEditColumnId] = useState(-1);
+  const ChangeEditColumnId = (ColumnId) => {
+    setEditColumnId(ColumnId);
+  }
+
+
   return (
     <DataGrid
       items={newTableData}
@@ -285,8 +301,12 @@ const List = (editType) => {
               </TableCellLayout>
             );
           },
-          renderCell: (item) => {
-            return <ChangeBtnShowType cellData={item.姓名.label} />
+          renderCell: (item, rowId, columnId) => {
+            if (rowId == editRowId && editType.edit == "true" && editColumnId == columnId) {
+              return <ChangeBtnShowType cellData={item.姓名.label} />
+            } else {
+              return item.姓名.label;
+            }
           },
         }),
         createTableColumn({
@@ -303,8 +323,12 @@ const List = (editType) => {
               </TableCellLayout>
             );
           },
-          renderCell: (item) => {
-            return editType.edit == "true" ? <Input type="number" defaultValue={item.序号.label} style={{ width: "100%" }} /> : item.序号.label;
+          renderCell: (item, rowId, columnId) => {
+            if (rowId == editRowId && editType.edit == "true" && editColumnId == columnId) {
+              return <Input type="number" defaultValue={item.序号.label} style={{ width: "100%" }} />;
+            } else {
+              return item.序号.label;
+            }
           },
         }),
 
@@ -321,11 +345,15 @@ const List = (editType) => {
               </TableCellLayout>
             );
           },
-          renderCell: (item) => {
-            return editType.edit == "true" ? <Select style={{ width: "calc(100% - 70px)" }}>
-              <option value="男" selected={item.性别.label == "男"}>男</option>
-              <option value="女" selected={item.性别.label == "女"}>女</option>
-            </Select> : item.性别.label;
+          renderCell: (item, rowId, columnId) => {
+            if (rowId == editRowId && editType.edit == "true" && editColumnId == columnId) {
+              return <Select style={{ width: "calc(100% - 70px)" }}>
+                <option value="男" selected={item.性别.label == "男"}>男</option>
+                <option value="女" selected={item.性别.label == "女"}>女</option>
+              </Select>;
+            } else {
+              return item.性别.label;
+            }
           },
         }),
         createTableColumn({
@@ -342,8 +370,12 @@ const List = (editType) => {
             );
           },
 
-          renderCell: (item) => {
-            return item.年龄.label;
+          renderCell: (item, rowId, columnId) => {
+            if (rowId == editRowId && editType.edit == "true" && editColumnId == columnId) {
+              return <Input type="date" defaultValue={item.年龄.label} />;
+            } else {
+              return item.年龄.label;
+            }
           },
         }),
         createTableColumn({
@@ -359,12 +391,16 @@ const List = (editType) => {
               </TableCellLayout>
             );
           },
-          renderCell: (item) => {
-            return editType.edit == "true" ? <Input type="date" defaultValue={item.最后在线时间.label} /> : item.最后在线时间.label;
+          renderCell: (item, rowId, columnId) => {
+            if (rowId == editRowId && editType.edit == "true" && editColumnId == columnId) {
+              return <Input type="date" defaultValue={item.最后在线时间.label} />;
+            } else {
+              return item.最后在线时间.label;
+            }
           },
         }),
       ]}
-      selectionMode="multiselect"
+      selectionMode="single"
       sortable
       sortState={dataSortType}
       subtleSelection
@@ -385,21 +421,24 @@ const List = (editType) => {
             key={rowId}
             selectionCell={{ radioIndicator: { "aria-label": "Select row" } }}
           >
-            {({ renderCell }) => (
-              <DataGridCell>{renderCell(item)}</DataGridCell>
+            {({ renderCell, columnId }) => (
+              <DataGridCell onClick={(e) => {
+                ChangeEditRowId(rowId);
+                ChangeEditColumnId(columnId);
+              }}>{renderCell(item, rowId, columnId)}</DataGridCell>
             )}
           </DataGridRow>
         )}
       </DataGridBody>
 
-      <Button
+      {editType.edit == "true" && (<Button
         appearance="subtle"
         icon={<Add16Filled />}
         style={{ color: "#ca5010" }}
         onClick={() => {
           AddNewRow();
         }}
-      >添加新项目</Button>
+      >添加新项目</Button>)}
     </DataGrid>