11

src/components/EditableFormItem/index.jsx

@@ -4,7 +4,7 @@ import { Input, Form, Row, Col } from 'antd'
 import React, { useState, useEffect, useRef } from 'react'
 import './index.less'
 
-const EditableFormItem = ({ children, dataIndex, record }) => {
+const EditableFormItem = ({ label, dataIndex, record }) => {
   const [editing, setEditing] = useState(false)
   const inputRef = useRef(null)
   useEffect(() => {
@@ -40,12 +40,14 @@ const EditableFormItem = ({ children, dataIndex, record }) => {
     <Input ref={inputRef} onPressEnter={save} onBlur={save} />
   ) : (
     <div className="editable-cell-value-wrap" onClick={toggleEdit}>
-      {children}
+      {record}
     </div>
   )
-  return(
+  return (
     <Row>
-      <Col span={2} />
+      <Col span={2}>
+        <span className="zh-lh-32">{label}:</span>
+      </Col>
       <Col span={22}>{cell}</Col>
     </Row>
   )

src/pages/Customer/Company/index.jsx

@@ -6,13 +6,7 @@ import EditableFormItem from '@/components/EditableFormItem'
 const Company = () => {
   return (
     <Card bordered={false}>
-      <Form>
-        <Form.Item label="姓名">
-          <EditableFormItem dataIndex="name" record="">
-            哈哈哈哈哈哈
-          </EditableFormItem>
-        </Form.Item>
-      </Form>
+      <EditableFormItem label="名字" dataIndex="name" record="哈哈哈哈" />
     </Card>
   )
 }