首页 > 开发 > JS > 正文

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

2017-09-05 12:21:21  来源:网友分享

利用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    } }