問題描述

利用antd table 做了個(gè)表格，每行是可編輯的，因?yàn)槲沂前凑展俜降膶懛▉斫M織代碼，所以具體代碼請移步看官方的文檔，戳這里--->> https://ant.design/components...

如果要把編輯后的數(shù)據(jù)保存到服務(wù)器，首先要獲得編輯成功之后的數(shù)據(jù)，一開始是在editDone()獲取，后來證明在該方法里是無法獲取到編輯成功之后的數(shù)據(jù)；

轉(zhuǎn)向單元格的handleChange()，在這里面確實(shí)可以獲得編輯成功之后的數(shù)據(jù)，可是該方法是被循環(huán)調(diào)用的，很多操作都被搞懵了。

請大家是怎么把編輯后的數(shù)據(jù)上傳到服務(wù)器的？

問題解答

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

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

有一個(gè)handleChange方法會監(jiān)聽input值的變化，并實(shí)時(shí)改變state的值，所以在editDone中,

const { data } = this.state;//這個(gè)data就是你修改之后的值

有處理過一個(gè)可編輯的table,需求是一個(gè)編輯按鈕，一個(gè)提交按鈕，所以用<Form>包裹<Table>

<Form layout='inline' onSubmit={this.handleSubmit}> //用handleSubmit統(tǒng)一拿值

handleSubmit = (e) => {//因?yàn)槲覀冞@個(gè)可編輯的內(nèi)容都需要校驗(yàn)，就用到antd中的validateFields,這個(gè)方法取值也方便 this.props.form.validateFields((err, values) => { console.log(values);//table中所有注冊到getFieldDecorator中的項(xiàng)的值都取到了，在這里你也可以改造values } }