javascript - Wie speichere ich bearbeitbare Zeilendaten in einer AntD-Tabelle auf dem Server?

Question

Mit antd table kann jede Zeile bearbeitet werden, da ich den Code gemäß der offiziellen Schreibmethode organisiere. Den spezifischen Code finden Sie im offiziellen Dokument. Klicken Sie hier --->> /ant.design/components...

Wenn Sie die bearbeiteten Daten auf dem Server speichern möchten, müssen Sie die Daten zunächst nach erfolgreicher Bearbeitung abrufen. Zuerst wurden sie über editDone() abgerufen, später stellte sich jedoch heraus, dass die Daten nach erfolgreicher Bearbeitung mit dieser Methode nicht abgerufen werden können ;

Wenden Sie sich an handleChange () der Zelle, wo Sie nach erfolgreicher Bearbeitung zwar die Daten abrufen können, diese Methode jedoch in einer Schleife aufgerufen wird und viele Vorgänge verwirrt sind.

Wie lädt man die bearbeiteten Daten auf den Server hoch?

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>包裹<Table>

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

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