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