上一节，只完成了创建（Create）
这节把 更新（Update）和删除（Delete）完善
读取（Retrieve）还是用后端比较方便, 当然你可以用localstorage, 我懒就不弄了。 -.-|
更新（Update）
重定义table中的columns, 加入更新样式,控制函数,及id
//app/public/src/all/index.js
//定义表格
+ columns = [{
+ title: 'id',
+ dataIndex: 'key',
+ key: 'key',
+ },{
title: '姓名',
dataIndex: 'name',
key: 'name',
}, {
title: '年龄',
dataIndex: 'age',
key: 'age',
}, {
title: '住址',
dataIndex: 'address',
key: 'address',
+ }, {
+ title: '操作',
+ dataIndex: 'operation',
+ key: 'operation',
+ render: (text, record) => (
+ <div style={{ textAlign: 'ceter' }}>
+ <a href="javascript:void(0)" style={{ marginRight: +'10px' }}
+ onClick={() => this.editHandle(record)}
+ >编辑</a>
+ </div>
+ ),
+ }];
新建一条数据，可看到 【编辑】
编辑editHandle函数，将当前行数据传递给EditModal组件展示
//app/public/src/all/index.js
constructor(props) {
super(props);
this.state = {
editVisiable:false,
dataSource:[],
+ editDataObj:{},
}
}
+ editHandle = (record)=> {
+ //record 为 当前行数据
+ //将当前行数据传递给EditModal组件展示
+ this.setState({
+ editVisiable:true,
+ editDataObj:record,
+ })
+ }
render() {
// editVisiable控制弹窗显示, dataSource为tabale渲染的数据
+ const { editVisiable, dataSource, editDataObj} = this.state
return (
<div className="content-inner">
<Button type ='primary' onClick={ this.addDataSource }> 新建数据</Button>
<Table
columns = {this.columns}
dataSource={dataSource}
/>
<EditModal
editVisiable={ editVisiable }
onModelCancel={ this.onModelCancel}
saveData = { this.saveData }
+ editDataObj = { editDataObj }
/>
</div>
);
}
在EditModal组件中把父组件传递的值，渲染到输入框
实际把值赋给 getFieldDecorator中的参数initialValue
//app/public/src/all/edit/index.js
render() {
+ const { editVisiable, onModelCancel, editDataObj} = this.props
// getFieldDecorator用于定义表单中的数据
const { getFieldDecorator } = this.props.form
return (
<Modal
visible = { editVisiable }
onCancel = { onModelCancel }
onOk = { this.onOk }
>
<Form>
<FormItem
label="姓名"
{...formLayout}
>
{getFieldDecorator('name', {
+ initialValue: editDataObj.name ||'',
rules: [{
required: true, message: '姓名必填',
}],
})(
<Input />
)}
</FormItem>
<FormItem
label="年龄"
{...formLayout}
>
{getFieldDecorator('age', {
+ initialValue: editDataObj.age ||'',
rules: [{
required: true, message: '姓名必填',
}],
})(
<Input />
)}
</FormItem>
<FormItem
label="住址"
{...formLayout}
>
{getFieldDecorator('address', {
+ initialValue: editDataObj.address ||'',
rules: [{
required: true, message: '住址必填',
}],
})(
<Input />
)}
</FormItem>
</Form>
</Modal>
);
}
点击编辑，即可看到对应数据已经渲染到输入框中。
不过目前还不能编辑数据,这时修改数据,还是在添加。
所以需要要onOk回调中加一个判断
判断数据是新数据，还是旧数据
通过editDataObj.key判断
若是更新
则调用父组件方法,改变table组件的dataSource,完成更新
//app/public/src/all/edit/index.js
onOk = () => {
+ const { editDataObj, updateDataHandle, onModelCancel, saveData} = this.props
//getFieldsValue() 获取表单中输入的值
+ const { getFieldsValue, resetFields } = this.props.form
+ const values = getFieldsValue()
//antd table需要加一个key字段
+ //判断是更新 还是添加
+ if(editDataObj.key) {
+ //输入框本身无key
+ values.key = editDataObj.key
+ //调用父组件方法改变dataSourse
+ updateDataHandle(values)
+ } else {
+ const key = this.state.key + 1
+ this.setState({
+ key:key,
+ })
+ values.key = key
+ saveData(values)
+ }
//重置表单
+ resetFields()
+ onModelCancel()
}
父组件方法
//app/public/src/all/index.js
+//修改
+ updateDataHandle = (values)=> {
+ const { dataSource } = this.state
+ const id = values.key
+ const index = dataSource.findIndex(e=> e.key == id)
+ //替换
+ var replace = dataSource.splice(index,1,values)
+ this.setState({
+ dataSource:dataSource,
+ })
+ }
点击编辑，修改数据即可看到效果
OK,编辑数据完成，
不过这里有个bug
在点击【编辑】后
再点击【新建数据】,
会发现不能新建数据,只是修改了上个Modal的数据。
具体修改：在addDataSource中把editDataObj初始化就行了
//app/public/src/all/index.js
//显示弹窗
addDataSource = () =>{
this.setState({
editVisiable:true,
+ editDataObj:{},
})
}
删除（Delete)
删除的逻辑就比较简单了
思路：加一个删除的触发函数,
把数据添加个状态
在回调里调用updateDataHandle方法
然后判断下是修改还是删除就行了
加入删除
//app/public/src/all/index.js
//定义表格
columns = [{
title: 'id',
dataIndex: 'key',
key: 'key',
},{
title: '姓名',
dataIndex: 'name',
key: 'name',
}, {
title: '年龄',
dataIndex: 'age',
key: 'age',
}, {
title: '住址',
dataIndex: 'address',
key: 'address',
}, {
title: '操作',
dataIndex: 'operation',
key: 'operation',
render: (text, record) => (
<div style={{ textAlign: 'ceter' }}>
<a href="javascript:void(0)" style={{ marginRight: '10px' }}
onClick={() => this.editHandle(record)}
>编辑</a>
+ <a href="javascript:void(0)" style={{ marginRight: +'10px' }}
+ onClick={() => this.deleteHandle(record)}
+ >删除</a>
</div>
),
}]
引入antd 中的简易弹窗, 编辑删除函数
//app/public/src/all/index.js
import React, { Component } from 'react';
+import { Button, Table, Modal} from 'antd'
import EditModel from './edit'
+ const confirm = Modal.confirm;
+//删除
+ deleteHandle = (record) => {
+ confirm({
+ title: `您确定要删除?(${record.key})`,
+ onOk: () => {
+ this.updateDataHandle({
+ key:record.key,
+ status:-1,
+ })
+ },
+ });
+ }
//更新
updateDataHandle = (values) => {
var { dataSource } = this.state
+ const id = values.key,
+ status = values.status || 0
const index = dataSource.findIndex(e=> e.key==id )
+ //替换
+ if(status >= 0) {
+ let replace = dataSource.splice(index,1,values)
+ } else {
+ //删除
+ let removed = dataSource.splice(index,1)
+ }
this.setState({
dataSource:dataSource,
})
}
OK 删除功能
还有点小问题, id不是递增，递减修改,不过无所谓了
(完...待续)
下集 配合后端接口渲染
网友评论