react实现列表增删改查的小demo(class组件版)
前言
react的语法上就是比vue麻烦不少,既然要开手动挡,那就开吧,一个基础的demo
效果图
列表
新增弹窗
编辑弹框
新增一条数据后的效果
代码
根组件 index.jsx
import React, { Component,createRef} from 'react'
import withRouter from '../../utils/withRouter'
import GlobalFormCom from './globalForm'
import GlobalTable from './globalTable'
import './index.less'
import { cloneDeep } from 'lodash'
import { Input, Select , Button , Modal } from 'antd';
import PubSub from 'pubsub-js'
export default withRouter(class index extends Component {
state = {
searchForm:{
searchName:'王惊涛',
selectValue:'jsCoder'
},
modalInfo:{
isModalOpen:false,
modalTitle:'新建数据',
},
doneType:'add',
addFormData:{},
editFormData:{},
editRecord:{}
}
searchDom = {
width: '200px',
marginRight:'16px'
}
selectOptions = [
{
label:'前端',
value:'jsCoder'
},
{
label:'后端',
value:'pythonCoder'
}
]
changeNameInput = (e,name) => {
this.setValue('searchForm',this.state.searchForm,name,e.target.value)
}
changeSelectValue = (e,name) =>{
this.setValue('searchForm',this.state.searchForm,name,e)
}
setValue = (name,data,key,value,fn)=>{
let _data = cloneDeep(data)
_data[key] = value
this.setState({[name]:_data},()=>{
if(fn){
fn()
}
})
}
openModal = (flag) =>{
this.setState({doneType:flag})
let fn = ()=>{
this.setValue('modalInfo',this.state.modalInfo,'modalTitle','新建数据')
}
this.setValue('modalInfo',this.state.modalInfo,'isModalOpen',true,fn)
}
editHandler = (editData)=>{
this.setState({doneType:'edit'},()=>{
this.setValue('modalInfo',this.state.modalInfo,'modalTitle','编辑数据')
})
let data = cloneDeep(editData)
this.setState({editRecord:data})
this.setValue('modalInfo',this.state.modalInfo,'isModalOpen',true,()=>{
setTimeout(()=>{
PubSub.publish('editForm',this.state.editRecord)
})
})
}
handleOk = ()=>{
// this.handleCancel()
if(this.state.doneType === 'add'){
PubSub.publish('getFormData','add')
}else if(this.state.doneType === 'edit'){
PubSub.publish('getFormData','edit')
}
}
handleCancel = ()=>{
let fn = ()=>{
}
this.setValue('modalInfo',this.state.modalInfo,'isModalOpen',false,fn)
}
globalFormStyle = ()=>{
if(this.state.isModalOpen === false){
return {
display:none
}
}
}
sendFormData = (formData,flag)=>{
if(flag === 'add'){
this.setState({addFormData:formData},()=>{
PubSub.publish('addTableData',this.state.addFormData)
})
}else if(flag === 'edit'){
this.setState({editFormData:formData},()=>{
PubSub.publish('editTableData',this.state.editFormData)
})
}
}
reqList = ()=>{
setTimeout(()=>{
PubSub.publish('reqList')
})
}
render() {
return (
姓名:
this.changeNameInput(e,'searchName')} value={this.state.searchForm.searchName} style={this.searchDom} />
类型:
)
}
})
表格组件 globalTable.jsx
import React, { Component } from 'react'
import withRouter from '../../utils/withRouter'
import { Table, Tag, Space, Button } from 'antd';
const { Column, ColumnGroup } = Table;
import PubSub from 'pubsub-js';
import { cloneDeep } from 'lodash';
export default withRouter(class globalTable extends Component {
state = {
data: []
}
genderMap = {
man: '男',
woman: '女'
}
workMap = {
pythonCoder: '后端',
jsCoder: '前端'
}
componentDidMount() {
this.reqList()
PubSub.unsubscribe('addTableData')
PubSub.subscribe('addTableData',(msg,data)=>{
this.setTableHandler(data,'add')
})
PubSub.unsubscribe('editTableData')
PubSub.subscribe('editTableData',(msg,data)=>{
this.changeTableRow(data)
})
PubSub.unsubscribe('reqList')
PubSub.subscribe('reqList',()=>{
this.reqList()
})
}
changeTableRow = (rowData)=>{
let cloneTableData = cloneDeep(this.state.data)
let index = cloneTableData.findIndex(val=>val.name === rowData.name)
cloneTableData[index] = rowData
this.setState({data:cloneTableData})
this.props['closeModal']()
}
setTableHandler = (data,type)=>{
let tableData = cloneDeep(this.state.data)
if(type === 'add'){
tableData.push(data)
this.setState({data:tableData},()=>{
this.props['closeModal']()
})
}
}
actionBtn = {
marginRight:'12px'
}
editHandler =(record)=>{
this.props.editHandler(record)
}
deleteHandler = (record)=>{
let index = this.state.data.findIndex(item=>item.name === record.name)
if(index !== -1){
let tableData = cloneDeep(this.state.data)
tableData.splice(index,1)
this.setState({data:tableData})
}
}
reqList = ()=>{
this.setState({
data:[{
name: '马师',
gender: 'woman',
work: 'jsCoder',
birthDate: '1995-01-04',
desc: '描述文字'
}]
})
}
render() {
return (
{
return {this.genderMap[text]}
}}>
(
{this.workMap[text]}
))}>
(
)}>
)
}
})
表单组件 globalForm.jsx
import React, { Component, forwardRef, createRef } from 'react'
import withRouter from '../../utils/withRouter'
import { InboxOutlined, UploadOutlined } from '@ant-design/icons';
import PubSub from 'pubsub-js';
import {
Input,
Form,
Radio,
Select,
DatePicker
} from 'antd';
import dayjs from 'dayjs';
const { Option } = Select;
const { TextArea } = Input;
const formItemLayout = {
labelCol: {
span: 6,
},
wrapperCol: {
span: 14,
},
};
const normFile = (e) => {
if (Array.isArray(e)) {
return e;
}
return e?.fileList;
};
const onFinish = (values) => {
};
const GlobalForm = withRouter(class index extends Component {
state = {
formData: {
name: '',
gender: true,
work: null,
desc: '',
birthDate: null,
}
}
workList = [
{
label: '前端',
value: 'jsCoder'
},
{
label: '后端',
value: 'pythonCoder'
}
]
changeFormItem = (e, name) => {
switch (name) {
case 'work':
this.setFormValue(e, name)
case 'birthDate':
this.setFormValue(e, name)
break
default:
this.setFormValue(e.target.value, name)
}
}
setFormValue = (value, key, fn) => {
let _formData = this.state.formData
_formData[key] = value
this.setState({ formData: _formData }, () => {
if (fn) {
fn()
}
})
}
changeDate = (date, dateString) => {
this.setFormValue(dateString, 'birthDate')
}
componentDidMount() {
PubSub.unsubscribe('getFormData')
PubSub.subscribe('getFormData', (msg, data) => {
if (data === 'add') {
this.formRef.current.validateFields().then((value) => {
this.props.sendFormData(this.state.formData, 'add')
}).catch((error) => {
})
} else if (data === 'edit') {
this.formRef.current.validateFields().then((value) => {
this.props.sendFormData(this.state.formData, 'edit')
}).catch((error) => {
})
}
})
PubSub.unsubscribe('editForm')
PubSub.subscribe('editForm', (msg, data) => {
data.birthDate = dayjs(data.birthDate)
this.setState({ formData: data }, () => {
for (let item in data) {
this.formRef.current.setFieldValue(item, data[item])
}
})
})
}
componentDidUpdate() {
}
componentWillUnmount() {
PubSub.unsubscribe('getFormData')
PubSub.unsubscribe('editForm')
}
formRef = createRef()
render() {
return (