javascript - antd table 如何把可编辑行的数据保存到服务器？

问题描述

问 题

利用antd table 做了个表格，每行是可编辑的，因为我是按照官方的写法来组织代码，所以具体代码请移步看官方的文档，戳这里--->> https://ant.design/components...

如果要把编辑后的数据保存到服务器，首先要获得编辑成功之后的数据，一开始是在editDone()获取，后来证明在该方法里是无法获取到编辑成功之后的数据；

转向单元格的handleChange()，在这里面确实可以获得编辑成功之后的数据，可是该方法是被循环调用的，很多操作都被搞懵了。

请大家是怎么把编辑后的数据上传到服务器的？

解决方案

我试了下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
    } 
}

这篇关于javascript - antd table 如何把可编辑行的数据保存到服务器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！