feat: editFormItem input修改

src/components/EditableForm/editableForm.jsx

@@ -3,7 +3,6 @@ import React from 'react'
 import EditableFormItem from './EditableFormItem'
 
 const EditableForm = ({ dataSource, columns }) => {
-  console.log(dataSource)
   const newColumns = columns.map(item => {
     const newItem = { ...item }
 
@@ -33,6 +32,7 @@ const EditableForm = ({ dataSource, columns }) => {
             dataIndex={column.dataIndex}
             record={dataSource[column.dataIndex]}
             span={column.span}
+            dataId={dataSource.id}
             editable={column.editable}
             editCellType={column.editCellType}
           />

src/components/EditableForm/editableFormItem.jsx

@@ -7,12 +7,17 @@ import './index.less'
 const EditableFormItem = ({ label, dataIndex, record, dataId, span, editCellType }) => {
   const [editing, setEditing] = useState(false)
   const inputRef = useRef(null)
-  // console.log(val)
+  const [val, setVal] = useState('')
   useEffect(() => {
+    // 处于编辑状态自动聚焦
     if (editing) {
       inputRef.current.focus()
     }
-  }, [editing])
+    // 当val为空时，需要设置默认值
+    if (!val) {
+      setVal(record)
+    }
+  }, [record, editing])
 
   const toggleEdit = () => {
     setEditing(!editing)
@@ -26,18 +31,17 @@ const EditableFormItem = ({ label, dataIndex, record, dataId, span, editCellType
   }
   const save = async e => {
     const { value = '' } = e.currentTarget
-    // debugger
-    toggleEdit()
     if (value === record) {
       return
     }
-
+    setVal(value)
     await handleConfirm(value)
+    toggleEdit()
   }
 
   // const handleOnChange = e => {
-  //   const { value = '' } = e.currentTarget
   //   setVal(value)
+  //   const { value = '' } = e.currentTarget
   // }
 
   let cell = null
@@ -51,13 +55,21 @@ const EditableFormItem = ({ label, dataIndex, record, dataId, span, editCellType
         // cell = ()
         break
       default:
-        cell = <Input ref={inputRef} onPressEnter={save} onBlur={save} defaultValue={record} />
+        cell = (
+          <Input
+            ref={inputRef}
+            onPressEnter={save}
+            onBlur={save}
+            defaultValue={val}
+            // onChange={handleOnChange}
+          />
+        )
         break
     }
   } else {
     cell = (
       <div className="editable-cell-value-wrap" onClick={toggleEdit}>
-        {record}
+        {val}
       </div>
     )
   }

src/components/PopContent/Contacts/ContanctForm.jsx

@@ -11,7 +11,7 @@ const ContanctForm = props => {
   const record = {
     clientname: '啊实打实大',
     address: '珠海',
-    telephone: "diodjioadhja念佛安徽佛安徽省"
+    telephone: 'diodjioadhja念佛安徽佛安徽省'
   }
 
   const columns = [