javascript - How to save editable row data to the server in antd table?

Question

Using antd table to make a table, each row is editable, because I organized the code according to the official writing method, so please refer to the official document for the specific code, click here--->> https ://ant.design/components...

If you want to save the edited data to the server, you must first obtain the data after successful editing. At first, it was obtained through editDone(), but it later proved that the data after successful editing could not be obtained in this method;

Turn to the cell's handleChange(), where you can indeed get the data after successful editing, but this method is called in a loop, and many operations are confused.

How do you upload the edited data to the server?

Answer 1

I tried the antd example, and I can get the edited value in EditableCell,

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

There is a handleChange method that monitors changes in the input value and changes the state value in real time,
So in editDone,

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

I have dealt with an editable table. The requirement is an edit button and a submit button, so use <Form> to wrap <Table>

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

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