最近在修改展示文件信息和用户信息的表单，需求是能够点击按钮来修改，同时不影响数据的展示。
最开始，我直接将可以修改的部分直接存放到输入框中，简单粗暴，可是非常影响美观，并且有严重的修改逻辑，因为采用的是react框架，并不能用id直接绑定input的节点来获取value，所以每一个可修改的节点都有一个onchange的方法来修改，但是最后的保存按钮并不能控制一整行修改的内容。
因此需要对当前的修改结果进行暂存。此时，当前模块的state中有三项数据：
this.state = {
result: [],
changeLine: [],
temp: []
}
点input框onblur或者下拉数据框onchange的时候，就会调用modify方法来更改数据并存入temp：
modify(index, type, value) {
console.log(index, type, value);
let _temp = JSON.parse(JSON.stringify(this.state.temp));
_temp[index][type] = value;
// console.log(_temp[index])
this.setState({
temp: _temp
})
}
上面参数：index为该条数据的key值，也就是数据的第几项，type指的是修改数据的项名，value指的是修改后的值。在每一项修改之后都将这些数据保存到temp暂存，点击下一个框修改的时候便在暂存的基础上修改。现在就有个问题，如果我不想修改了怎么办？
在这里，我将对输入框的内容进行判断，如果为空，那么就使用原来的数据作为value值：
<Input type='text' size='small' style={{ width: '100px' }} placeholder={val} onBlur={
(e)=>{
let v = e.target.value.trim()==''?e.target.placeholder:e.target.value;
this.modify(line.key,'username',v)
}
}/>
这样，就可以完美解决如果不想修改数据但是已经改过一次的问题，只要在点击保存按钮之前都是可以撤销修改的。
同时，我又加上了修改按钮，刚获取到数据时候，是没有修改框的，需要点击右侧的修改按钮才能出现修改框：
修改之后点击保存按钮就行提交到最后的result中。
上面需求的实现需要一个changeLine的state来存放某一行是否在修改状态，如果在修改状态，就显示输入框和下拉框可进行修改，点击保存可以将修改数据提交。
changeState(key) {
let line = this.state.changeLine;
if (line[key]) {//保存修改
line[key] = false;
this.setState({
result: this.state.temp
})
} else {
line[key] = true;
}
this.setState({
changeLine: line
})
}
如果changeLine的state为true则保存修改，如果为false则将其状态更改为修改状态。
最后是整个页面的代码：
import { Table, Icon, Divider, Select, Input } from 'antd';
const Option = Select.Option;
import React from 'react';
import config from '../common/config.jsx';
export default class UserTable extends React.Component {
constructor(props) {
super(props);
this.state = {
result: [],
changeLine: [],
temp: []
}
}
componentDidMount() {
const data = [{
key: '0',
userid: 121,
username: 'John Brown',
nickname: 'John Brown',
download: 32,
upnum: 32,
state: 1,
xname: 32,
mname: 32,
uptime: 32,
origion: 32,
}, {
key: '1',
userid: 121,
username: 'John Brown',
nickname: 'John Brown',
download: 32,
upnum: 32,
state: 1,
xname: 32,
mname: 32,
uptime: 32,
origion: 32,
}, {
key: '2',
userid: 121,
username: 'John Brown',
nickname: 'John Brown',
download: 32,
upnum: 32,
state: 1,
xname: 32,
mname: 32,
uptime: 32,
origion: 32,
}, {
key: '3',
userid: 121,
username: 'John Brown',
nickname: 'John Brown',
download: 32,
upnum: 32,
state: 1,
xname: 32,
mname: 32,
uptime: 32,
origion: 32,
}, {
key: '4',
userid: 121,
username: 'John Brown',
nickname: 'John Brown',
download: 32,
upnum: 32,
state: 1,
xname: 32,
mname: 32,
uptime: 32,
origion: 32,
}];
this.setState({
result: data,
changeLine: new Array(data.length).fill(false),
temp: data
})
}
changeState(key) {
let line = this.state.changeLine;
if (line[key]) {//保存修改
line[key] = false;
this.setState({
result: this.state.temp
})
} else {
line[key] = true;
}
this.setState({
changeLine: line
})
}
modify(index, type, value) {
console.log(index, type, value);
let _temp = JSON.parse(JSON.stringify(this.state.temp));
_temp[index][type] = value;
// console.log(_temp[index])
this.setState({
temp: _temp
})
}
render() {
const columns = [{
title: '用户id',
dataIndex: 'userid',
key: 'userid',
}, {
title: '用户名',
dataIndex: 'username',
key: 'username',
render: (val,line) => {
return this.state.changeLine[line.key]?(<Input type='text' size='small' style={{ width: '100px' }} placeholder={val} onBlur={(e)=>{let v = e.target.value.trim()==''?e.target.placeholder:e.target.value;this.modify(line.key,'username',v)}}/>):(val)
}
}, {
title: '用户昵称',
dataIndex: 'nickname',
key: 'nickname',
render: (val,line) => {
return this.state.changeLine[line.key]?(<Input type='text' size='small' style={{ width: '100px' }} placeholder={val} onBlur={(e)=>{let v = e.target.value.trim()==''?e.target.placeholder:e.target.value;this.modify(line.key,'nickname',v)}}/>):(val)
}
}, {
title: '学院',
dataIndex: 'xname',
key: 'xname',
render: (val,line) => {
return this.state.changeLine[line.key]?(<Input type='text' size='small' style={{ width: '50px' }} placeholder={val} onBlur={(e)=>{let v = e.target.value.trim()==''?e.target.placeholder:e.target.value;this.modify(line.key,'xname',v)}}/>):(val)
}
}, {
title: '专业',
dataIndex: 'mname',
key: 'mname',
render: (val,line) => {
return this.state.changeLine[line.key]?(<Input type='text' size='small' style={{ width: '50px' }} placeholder={val} onBlur={(e)=>{let v = e.target.value.trim()==''?e.target.placeholder:e.target.value;this.modify(line.key,'mname',v)}}/>):(val)
}
}, {
title: '上传资源数',
dataIndex: 'upnum',
key: 'upnum',
}, {
title: '下载资源数',
dataIndex: 'download',
key: 'download',
}, {
title: '用户状态',
dataIndex: 'state',
key: 'state',
render: (text,line) => {
//0 正常 ；1 封禁
return this.state.changeLine[line.key]?(<Select defaultValue={text.toString()} style={{ width: 120 }} onChange={(value)=>{this.modify(line.key,'state',value)}}>
<Option value="1">封禁</Option>
<Option value="0">正常</Option>
</Select>):(config.fstate[text])
}
}, {
title: '操作',
key: 'action',
render: (text, record) => (
<span>
{this.state.changeLine[record.key]?<a href='javascript:;' onClick={()=>this.changeState(record.key)}><Icon type="save" /></a>:<a href='javascript:;' onClick={()=>this.changeState(record.key)}><Icon type="tool" /></a>}
<Divider type="vertical" />
<a href="javascript:;" className="ant-dropdown-link">
<Icon type="close-circle-o" />
</a>
</span>
),
}];
return (
<div>
<Table columns={columns} dataSource={this.state.result} pagination={{ pageSize: 6 }} />
</div>
)
}
}