antd表格与form组合使用

antd是一个非常流行的React组件库，其中包含了丰富的UI组件和工具。它提供了一个Table组件用于快速创建数据表格，也提供了Form组件用于创建表单。

在实际应用中，我们通常需要将表格与表单结合使用。一种常见的场景是，当用户点击表格中的一行数据时，需要将该数据的详细信息展示在表单中，以便用户进行编辑或其他操作。

使用antd的Table组件和Form组件结合时，我们可以根据需求进行如下操作：

1. 设置表格的选择功能：antd的Table组件支持设置行级的选择功能，可以通过设置rowSelection属性来实现，该属性可以指定选择操作的配置项，比如选择模式、默认选中的行、选择时触发的回调函数等。

2. 设置表格的行点击事件：我们可以通过设置Table组件的onRow属性来指定行点击时触发的回调函数，该函数可以接收点击的行索引作为参数，我们可以在回调函数中将该索引赋值给一个状态变量，然后在表单中根据这个状态变量获取点击行的具体数据。

3. 在表单中展示点击行的数据：使用Form组件创建表单时，可以使用getFieldDecorator方法来绑定表单项与数据源，从而实现数据的双向绑定。我们可以通过在表单项的初始值中设置获取点击行数据的方式，从而在表单中展示对应数据。

4. 表单的提交与重置：在表单中编辑完数据后，我们可以通过antd的Form组件提供的handleSubmit和handleReset方法来分别处理表单的提交和重置操作。handleSubmit方法会在表单校验通过后触发一个回调函数，我们可以在该回调函数中进行数据的提交操作。handleReset方法会重置表单的所有字段和初始值。

综上所述，antd的Table组件和Form组件可以很方便地结合使用，通过设置选择功能、行点击事件以及使用数据绑定和提交重置方法，可以实现自定义的表格与表单交互功能。