javascript - antd table 如何把可編輯行的資料存到伺服器？

Question

利用antd table 做了個表格，每行是可編輯的，因為我是按照官方的寫法來組織代碼，所以具體代碼請移步看官方的文檔，戳這裡--->> https ://ant.design/components...

如果要把編輯後的數據保存到伺服器，首先要獲得編輯成功之後的數據，一開始是在editDone()獲取，後來證明在該方法裡是無法獲取到編輯成功之後的數據；

轉向單元格的handleChange()，在這裡面確實可以獲得編輯成功之後的數據，可是該方法是被循環調用的，很多操作都被搞懵了。

請大家是怎麼把編輯後的資料上傳到伺服器的？

Answer 1

我試了下antd的例子，可以拿到編輯後的值，在EditableCell中，

 handleChange(e) {
    const value = e.target.value;
    this.setState({ value });
  }

有一個handleChange方法會監聽input值的變化，並即時改變state的值，
所以在editDone中,

const { data } = this.state;//这个data就是你修改之后的值

有處理過一個可編輯的table,需求是一個編輯按鈕，一個提交按鈕，所以用

包裹

 <Form layout="inline" onSubmit={this.handleSubmit}> //用handleSubmit统一拿值

handleSubmit = (e) => {
//因为我们这个可编辑的内容都需要校验，就用到antd中的validateFields,这个方法取值也方便
   this.props.form.validateFields((err, values) => {
    console.log(values);//table中所有注册到getFieldDecorator中的项的值都取到了，在这里你也可以改造values
    } 
}