抽出useAutoTable的自定义hook实现多组件复用逻辑

src/components/Editcell/index.jsx

@@ -1,19 +1,19 @@
-import { Input,Form } from 'antd'
+import { Input, Form } from 'antd'
 import React, { useContext, useState, useEffect, useRef } from 'react'
 import { connect } from 'dva'
 
-const EditableContext = React.createContext(null)
+// const EditableContext = React.createContext(null)
 
-const EditableRow = ({ index, ...props }) => {
-  const [form] = Form.useForm()
-  return (
-    <Form form={form} component={false}>
-      <EditableContext.Provider value={form}>
-        <tr {...props} />
-      </EditableContext.Provider>
-    </Form>
-  )
-}
+// const EditableRow = ({ index, ...props }) => {
+//   const [form] = Form.useForm()
+//   return (
+//     <Form form={form} component={false}>
+//       <EditableContext.Provider value={form}>
+//         <tr {...props} />
+//       </EditableContext.Provider>
+//     </Form>
+//   )
+// }
 
 const EditableCell = ({
   title,
@@ -26,7 +26,7 @@ const EditableCell = ({
 }) => {
   const [editing, setEditing] = useState(false)
   const inputRef = useRef(null)
-  const form = useContext(EditableContext)
+  const [form] = Form.useForm()
   useEffect(() => {
     if (editing) {
       inputRef.current.focus()
@@ -42,6 +42,7 @@ const EditableCell = ({
 
   const save = async () => {
     try {
+      form.validateFields([dataIndex])
       const values = await form.validateFields()
       toggleEdit()
       handleSave({ ...record, ...values })
@@ -53,28 +54,18 @@ const EditableCell = ({
   let childNode = children
   if (editable) {
     childNode = editing ? (
-      <Form.Item
-        style={{
-          margin: 0
-        }}
-        name={dataIndex}
-        rules={[
-          {
-            required: true,
-            message: `${title} is required.`
-          }
-        ]}
-      >
-        <Input ref={inputRef} onPressEnter={save} onBlur={save} />
-      </Form.Item>
+      <Form form={form}>
+        <Form.Item name={dataIndex} rules={[{ required: true, message: `${title} is required.` }]}>
+          <Input ref={inputRef} onPressEnter={save} onBlur={save} />
+        </Form.Item>
+      </Form>
     ) : (
       <div
         className="editable-cell-value-wrap"
         style={{
           paddingRight: 24
         }}
-        onClick={toggleEdit}
-      >
+        onClick={toggleEdit}>
         {children}
       </div>
     )
@@ -84,22 +75,13 @@ const EditableCell = ({
 }
 
 const Editcell = props => {
-
   return (
     <div>
-      <Form
-        name="basic"
-      >
-        <Form.Item
-          label="Username"
-          name="username"
-        >
+      <Form name="basic">
+        <Form.Item label="Username" name="username">
           <Input />
         </Form.Item>
-        <Form.Item
-          label="Password"
-          name="Password"
-        >
+        <Form.Item label="Password" name="Password">
           <Input.Password />
         </Form.Item>
       </Form>

src/hooks/useAutoTable.js

@@ -1,9 +1,13 @@
 import { useState, useEffect } from "react"
 
-const useAutoTable = (collapsed) => {
+/**
+ *
+ * @param {boolean} collapsed 侧边栏是否折叠
+ * @param {number} needSubtractHeight 被裁去的高度
+ * @param {number} needSubtractWidth 被裁去的宽度
+ */
+const useAutoTable = (collapsed, needSubtractHeight, needSubtractWidth) => {
   // console.log(collapsed)
-  const needSubtractHeight = 48 + 48 + 48 + 64 + 24 // 需要被裁掉的高度
-  const needSubtractWidth = (collapsed ? 208 : 48) + 48 + 48 + 48// 需要被裁掉的高度
 
 
   const [scroll, setScroll] = useState({ x: document.body.clientWidth - needSubtractWidth, y: document.body.clientHeight - needSubtractHeight })

src/pages/Customer/Contact/index.jsx

@@ -12,7 +12,11 @@ import styles from './index.less'
 import LazyCascader from '@/components/LazyCascader'
 
 const Contact = props => {
-  const [x, y] = useAutoTable(props.collapsed)
+  const { collapsed } = props
+  const needSubtractHeight = 48 + 48 + 48 + 64 + 24 // 需要被裁掉的高度
+  const needSubtractWidth = (collapsed ? 208 : 48) + 48 + 48 + 48 // 需要被裁掉的高度
+
+  const [x, y] = useAutoTable(collapsed, needSubtractHeight, needSubtractWidth)
 
   const [state, setState] = useState({
     data: [],