React.FC 中 Form.List 如何动态加载明细数据

要动态加载明细数据，可以使用 React 的状态来存储明细数据，并在需要加载明细数据时更新状态。以下是一个示例代码：

import React, { useState } from 'react';
import { Form, List, Input, Button } from 'antd';

const DynamicList = () => {
  const [details, setDetails] = useState([]); // 初始化明细数据为空数组

  const addDetail = () => {
    setDetails([...details, { id: Date.now(), value: '' }]);
  };

  const removeDetail = (id) => {
    setDetails(details.filter(detail => detail.id !== id));
  };

  const handleChange = (id, value) => {
    const updatedDetails = details.map(detail => {
      if (detail.id === id) {
        return { ...detail, value };
      }
      return detail;
    });
    setDetails(updatedDetails);
  };

  return (
    <Form>
      <Form.List name='details'>
        {(fields, { add, remove }) => (
          <>
            {fields.map(field => (
              <List.Item key={field.key}>
                <Input
                  value={details.find(detail => detail.id === field.key)?.value}
                  onChange={e => handleChange(field.key, e.target.value)}
                />
                <Button onClick={() => remove(field.name)}>删除</Button>
              </List.Item>
            ))}
            <Button onClick={add}>新增</Button>
          </>
        )}
      </Form.List>
    </Form>
  );
};

 export default DynamicList;

在上述代码中，我们使用 useState 钩子来创建一个名为 details 的状态，用于存储明细数据。addDetail 函数用于在点击'新增'按钮时向 details 添加一个新的明细数据。removeDetail 函数用于在点击'删除'按钮时从 details 中移除指定的明细数据。handleChange 函数用于在输入框的值发生变化时更新对应的明细数据。

在 Form.List 的 render 函数中，我们使用 fields.map 方法来遍历所有明细数据，并将每个明细数据渲染为一个 List.Item 组件。在输入框的 value 属性中，我们使用 details.find 方法来根据明细数据的 id 找到对应的 value 值。在输入框的 onChange 事件中，我们调用 handleChange 函数来更新明细数据的值。

点击'新增'按钮会通过 add 方法添加一个新的明细数据，并通过 remove 方法调用'删除'按钮来移除指定的明细数据。