使用hooks重构table第一阶段

src/views/test/tables/SearchBar.jsx

@@ -0,0 +1,58 @@
+import React from 'react'
+
+import { Form, Input, Button } from 'antd'
+import PropTypes from 'prop-types'
+
+class SearchBar extends React.Component {
+  render() {
+    return (
+      <div>
+        {/* “logProps” HOC 透传（pass through）官方文档Refs转发那块 */}
+        <WrappedSearchForm {...this.props} />
+      </div>
+    )
+  }
+}
+
+SearchBar.propTypes = {
+  handleSearch: PropTypes.func
+}
+
+class SearchForm extends React.Component {
+  doSearch = () => {
+    const { handleSearch } = this.props
+    const queryParams = this.props.form.getFieldsValue()
+    handleSearch(queryParams)
+  }
+
+  render() {
+    const { getFieldDecorator } = this.props.form
+    return (
+      <Form layout={'inline'}>
+        <Form.Item>
+          {getFieldDecorator('name', {
+            initalValue: ''
+          })(<Input allowClear placeholder="请输入姓名" />)}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('age', {
+            initalValue: ''
+          })(<Input allowClear placeholder="请输入年龄" />)}
+        </Form.Item>
+        <Form.Item>
+          <Button type="primary" onClick={this.doSearch}>
+            搜索
+          </Button>
+        </Form.Item>
+      </Form>
+    )
+  }
+}
+
+SearchForm.propTypes = {
+  handleSearch: PropTypes.func
+}
+
+const WrappedSearchForm = Form.create({ name: 'searchBar' })(SearchForm)
+
+export default SearchBar

src/views/test/tables/index.jsx

@@ -1,90 +1,215 @@
-import React from 'react'
-import { Table, Divider, Tag } from 'antd'
+import React, { useState, useRef } from 'react'
+import { Table, Modal, Button, Form, Input } from 'antd'
+import SearchBar from './SearchBar'
+import moduleCss from './testScss.module.scss'
 
-const columns = [
-  {
-    title: 'Name',
-    dataIndex: 'name',
-    key: 'name',
-    render: text => <span>{text}</span>
-  },
-  {
-    title: 'Age',
-    dataIndex: 'age',
-    key: 'age'
-  },
-  {
-    title: 'Address',
-    dataIndex: 'address',
-    key: 'address'
-  },
-  {
-    title: 'Tags',
-    key: 'tags',
-    dataIndex: 'tags',
-    render: tags => (
-      <span>
-        {tags.map(tag => {
-          let color = tag.length > 5 ? 'geekblue' : 'green'
-          if (tag === 'loser') {
-            color = 'volcano'
-          }
-          return (
-            <Tag color={color} key={tag}>
-              {tag.toUpperCase()}
-            </Tag>
-          )
-        })}
-      </span>
-    )
-  },
-  {
-    title: 'Action',
-    key: 'action',
-    render: (text, record) => (
-      <span>
-        <span>Invite {record.name}</span>
-        <Divider type='vertical' />
-        <span>Delete</span>
-      </span>
-    )
-  }
-]
-
-const data = [
+const listData = [
   {
     key: '1',
     name: 'John Brown',
     age: 32,
-    address: 'New York No. 1 Lake Park',
-    tags: ['nice', 'developer']
+    address: 'New York No. 1 Lake Park'
   },
   {
     key: '2',
     name: 'Jim Green',
     age: 42,
-    address: 'London No. 1 Lake Park',
-    tags: ['loser']
+    address: 'London No. 1 Lake Park'
   },
   {
     key: '3',
     name: 'Joe Black',
     age: 32,
-    address: 'Sidney No. 1 Lake Park',
-    tags: ['cool', 'teacher']
+    address: 'Sidney No. 1 Lake Park'
   }
 ]
-export default class Tables extends React.Component {
-  render() {
+
+function TableDemo() {
+  const [modalTitle, setModalTitle] = useState('新增')
+  const [addOrEditVisible, setAddOrEditVisible] = useState(false)
+  const [initFormValues, setInitFormValues] = useState(null)
+  const [currentFormId, setCurrentFormId] = useState(null)
+  // let formRef = useRef(null)
+  let formRef
+
+  const actionRender = (text, record, index) => {
     return (
-      <div
-        style={{
-          height: '100%',
-          overflow: 'hidde'
-        }}
-      >
-        <Table columns={columns} dataSource={data} />
+      <div className={moduleCss.btn_container}>
+        <Button
+          onClick={() => {
+            handleCheckDetail(record)
+          }}
+          type='primary'
+          size={'small'}
+        >
+          查看
+        </Button>
+        <Button
+          style={{ marginLeft: '10px' }}
+          onClick={() => {
+            handleEdit(record)
+          }}
+          type='primary'
+          size={'small'}
+        >
+          编辑
+        </Button>
+        <Button
+          style={{ marginLeft: '10px' }}
+          onClick={() => {
+            handleDelete(record)
+          }}
+          type='danger'
+          size={'small'}
+        >
+          删除
+        </Button>
       </div>
     )
   }
+  const columns = [
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      key: 'name',
+      render: text => <span>{text}</span>
+    },
+    {
+      title: '年龄',
+      dataIndex: 'age',
+      key: 'age'
+    },
+    {
+      title: '地址',
+      dataIndex: 'address',
+      key: 'address'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      render: actionRender
+    }
+  ]
+
+  const handleConfirmAddOrEdit = () => {
+    const formToValidate = formRef.props.form
+    formToValidate.validateFields((errors, values) => {
+      if (errors) {
+        return
+      }
+      // const formData = formTovalidate.getFieldsValue()
+      // this.setState({
+      //   addOrEditVisible: false
+      // })
+    })
+  }
+
+  const handleCancelAddEditModel = () => {
+    setAddOrEditVisible(false)
+  }
+
+  const ModelClose = () => {
+    formRef.props.form.resetFields()
+    setInitFormValues({
+      name: ''
+    })
+  }
+
+  const handleAdd = () => {
+    setModalTitle('新增')
+    setCurrentFormId('newForAdd')
+    // 这里虽然更新了，但是form表单被缓存的输入值并没有改变，所以还是存在之前关闭的值在里面
+    // 就和之前的动态表单删除时之输入的值还在的时候的这个问题相同
+    setAddOrEditVisible(true)
+  }
+
+  const handleEdit = (record) => {
+    setCurrentFormId(record.key)
+    setAddOrEditVisible(true)
+    setInitFormValues({
+      name: record.name
+    })
+  }
+
+  const handleDelete = () => {}
+
+  const handleCheckDetail = () => {}
+
+  const handleSearch = () => {}
+
+  const renderBar = () => {
+    return (
+      <div style={{ overflow: 'hidden' }}>
+        <div className={moduleCss.bar_left}>
+          <Button onClick={handleAdd} type='primary'>
+            新增
+          </Button>
+        </div>
+        <div className={moduleCss.bar_right}>
+          <SearchBar handleSearch={handleSearch} />
+        </div>
+      </div>
+    )
+  }
+
+  const renderAddOrEditModel = () => {
+    return (
+      <Modal
+        title={modalTitle}
+        visible={addOrEditVisible}
+        onOk={handleConfirmAddOrEdit}
+        onCancel={handleCancelAddEditModel}
+        afterClose={ModelClose}
+      >
+        <div>
+          <WrappredAddOrEditForm
+            key={currentFormId}
+            wrappedComponentRef={form => (formRef = form)}
+            initValue={initFormValues}
+          />
+        </div>
+      </Modal>
+    )
+  }
+
+  const renderDetailModel = () => {}
+
+  const renderTable = () => {
+    return <Table bordered columns={columns} dataSource={listData} />
+  }
+
+  return (
+    <div className={moduleCss.main_container}>
+      <div className={moduleCss.main_container_bar}>{renderBar()}</div>
+      <div className={moduleCss.main_container_table}>{renderTable()}</div>
+      {renderDetailModel()}
+      {renderAddOrEditModel()}
+    </div>
+  )
 }
+
+class addOrEditForm extends React.Component {
+  render() {
+    const { getFieldDecorator } = this.props.form
+    const { initValue } = this.props
+    return (
+      <Form>
+        <Form.Item label='姓名'>
+          {getFieldDecorator('name', {
+            initialValue: initValue.name,
+            rules: [
+              {
+                required: true,
+                message: '请输入姓名'
+              }
+            ]
+          })(<Input placeholder='请输入姓名' />)}
+        </Form.Item>
+      </Form>
+    )
+  }
+}
+
+const WrappredAddOrEditForm = Form.create({ name: 'addOrEdit' })(addOrEditForm)
+
+export default TableDemo

src/views/test/tables/testScss.module.scss

@@ -0,0 +1,16 @@
+.main_container {
+  .main_container_bar {
+    .bar_left {
+      float: left;
+    }
+    .bar_right {
+      float: right;
+    }
+  }
+  .main_container_table {
+    margin-top: 24px;
+    .btn_container {
+
+    }
+  }
+}