javascript - antd table 如何把可编辑行的数据保存到服务器?
问题描述
利用antd table 做了个表格,每行是可编辑的,因为我是按照官方的写法来组织代码,所以具体代码请移步看官方的文档,戳这里--->> https://ant.design/components...
如果要把编辑后的数据保存到服务器,首先要获得编辑成功之后的数据,一开始是在editDone()获取,后来证明在该方法里是无法获取到编辑成功之后的数据;
转向单元格的handleChange(),在这里面确实可以获得编辑成功之后的数据,可是该方法是被循环调用的,很多操作都被搞懵了。
请大家是怎么把编辑后的数据上传到服务器的?
问题解答
回答1:我试了下antd的例子,可以拿到编辑后的值,在EditableCell中,
handleChange(e) { const value = e.target.value; this.setState({ value }); }
有一个handleChange方法会监听input值的变化,并实时改变state的值,所以在editDone中,
const { data } = this.state;//这个data就是你修改之后的值
有处理过一个可编辑的table,需求是一个编辑按钮,一个提交按钮,所以用<Form>包裹<Table>
<Form layout='inline' onSubmit={this.handleSubmit}> //用handleSubmit统一拿值
handleSubmit = (e) => {//因为我们这个可编辑的内容都需要校验,就用到antd中的validateFields,这个方法取值也方便 this.props.form.validateFields((err, values) => { console.log(values);//table中所有注册到getFieldDecorator中的项的值都取到了,在这里你也可以改造values } }
相关文章:
1. windows误人子弟啊2. php传对应的id值为什么传不了啊有木有大神会的看我下方截图3. 如何用笔记本上的apache做微信开发的服务器4. python - linux 下用wsgifunc 运行web.py该如何修改代码5. 关于mysql联合查询一对多的显示结果问题6. 实现bing搜索工具urlAPI提交7. 冒昧问一下,我这php代码哪里出错了???8. mysql优化 - MySQL如何为配置表建立索引?9. MySQL主键冲突时的更新操作和替换操作在功能上有什么差别(如图)10. 数据库 - Mysql的存储过程真的是个坑!求助下面的存储过程哪里错啦,实在是找不到哪里的问题了。
