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. docker安装后出现Cannot connect to the Docker daemon.2. 网页爬虫 - Python:爬虫的中文编码问题?3. javascript - 修改表单多选项时和后台同事配合的问题。4. ubuntu 远程管理KVM设置问题5. javascript - H5页面怎么查看console信息?6. javascript - vue生成一维码?求助!!!!!急7. css - 手机页面在安卓和苹果浏览器显示不同的小小问题8. javascript - 关于Js中 this的一道题9. angular.js - angularjs如何动态改变ng-model值,在controller中获取input中输入的值并组合post发送到后台10. browsersync检测的静态页面只能用index.html命名,用demo.html就不能实时同步,检测动态页面的时候,比如wamp环境下,用browsersync能打开页面,但不能实现同步
