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