这可能是由于缺少onChange处理程序引起的。在使用EditableRow组件时,应该给每个EditCell添加一个onChange处理程序。您可以尝试以下代码:
import React, { useState } from "react";
import { Table, Input, Button, Popconfirm, Form } from "antd";
const EditableCell = ({
editing,
dataIndex,
title,
inputType,
record,
index,
children,
...restProps
}) => {
const inputNode = inputType === "number" ? : ;
return (
{editing ? (
{inputNode}
) : (
children
)}
);
};
const EditableTable = () => {
const [form] = Form.useForm();
const [data, setData] = useState([
{
key: "0",
name: "Edward King 0",
age: "32",
address: "London, Park Lane no. 0"
},
{
key: "1",
name: "Edward King 1",
age: "32",
address: "London, Park Lane no. 1"
}
]);
const [editingKey, setEditingKey] = useState("");
const isEditing = (record) => record.key === editingKey;
const edit = (record) => {
form.setFieldsValue({
name: "",
age: "",
address: "",
...record
});
setEditingKey(record.key);
};
const cancel = () => {
setEditingKey("");
};
const save = async (key) => {
try {
const row = await form.validateFields();
const newData = [...data];
const index = newData.findIndex((item) => key === item.key);
if (index > -1) {
const item = newData[index];
newData.splice(index, 1, { ...item, ...row });
setData(newData);
setEditingKey("");
} else {
newData.push(row);
setData(newData);
setEditingKey("");
}
} catch (errInfo) {
console.log("Validate Failed:", errInfo);
}
};
const columns = [
{
title: "name",
dataIndex: "name",
width: "25%",
editable: true