React+Ant Design 实现可编辑表格单元格与动态添加行

"在React应用中使用Ant Design的Table组件创建可编辑单元格的实例，以及如何添加新行和利用Form获取数据" 在Ant Design的Table组件中实现可编辑单元格，主要是通过自定义`columns`中的`render`方法来完成。当用户需要在表格的特定列中进行数据编辑时，可以将`Input`组件插入到单元格内。在描述的案例中，遇到的问题是当修改一个`Input`的值时，所有其他相同的`Input`也会同步更新。这是因为这些`Input`共享了同一个状态变量。为了解决这个问题，开发者引入了动态的后缀，确保每个`Input`都有其独特的状态，这样修改一个`Input`就不会影响其他`Input`。 以下是实现这个功能的关键步骤： 1. 构造函数定义：在React组件的构造函数中，初始化`state`，包含`dataSource`数组，用于存储表格数据。例如，这里定义了一个包含`name1`、`name2`、`name3`属性的对象数组。初始状态下，数组可能为空，意味着表格一开始没有可编辑的行。 2. 添加状态管理：为了管理每个`Input`的值，可以使用React的`state`或者`Form`组件（来自Ant Design）来跟踪每个单元格的状态。在本例中，`Form`和`getFieldDecorator`被用来注册表单字段，并且与`Input`组件结合，使得每次输入变化时都能更新相关数据。 3. 定义`columns`：在`Table`组件的`columns`属性中，对于需要编辑的列，使用`render`方法返回一个`Form.Item`包裹的`Input`组件。`getFieldDecorator`用于绑定`Input`的值到表单域，同时为每个`Input`指定唯一的`key`，如`tableDt[${index}].name1`，这样每个单元格的`Input`都有独立的状态。 4. 添加新行：通过在`state`中增加`dataSource`的长度，可以实现在表格底部添加新的空白行。例如，增加`count`的值并更新`dataSource`，添加一个新的空对象到数组中。 5. 处理提交：当用户点击“提交”按钮时，可以通过调用`form.validateFields()`来验证所有表单字段，然后使用`form.getFieldsValue()`获取所有已填入的数据，包括新添加的行。 6. 渲染`Table`组件：在`render`方法中，将`dataSource`和自定义的`columns`传递给`Table`组件，同时通过`props.form`获取`getFieldDecorator`和`dataSource`。 通过以上步骤，可以构建一个功能完备的可编辑表格，允许用户在表格中直接编辑数据，并能方便地获取到修改后的值。这种方式极大地提升了用户体验，同时利用了Ant Design的组件库，使得界面保持一致性和专业性。