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. python - 请问这两个地方是为什么呢?2. javascript - 网易云信整合到项目的流程3. html5 - 微信小程序底部导航栏修改4. angular.js - 在ionic下,利用javascript导入百度地图,pc端可以显示,移动端无法显示5. HTML5禁止img预览该怎么解决?6. javascript - 手机点击input时,button会被顶上去?求解决!!!7. python3 脚本调用shell 指令如何获得返回值8. mybatis - Java关于Mysql的随机id生成9. dologin说是没有定义10. mysql - 数据库建字段,默认值空和empty string有什么区别 110