最近在修改展示文件信息和用户信息的表单，需求是能够点击按钮来修改，同时不影响数据的展示。
最开始，我直接将可以修改的部分直接存放到输入框中，简单粗暴，可是非常影响美观，并且有严重的修改逻辑，因为采用的是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> ) } }文章来源: table表单的修改和保存