React中使用ahooks处理业务场景

// 从 ahooks 引入 useDynamicList 钩子函数，用于管理动态列表数据（增删改）
import { useDynamicList } from 'ahooks';

// 从 @ant-design/icons 引入两个图标组件：减号圆圈图标和加号圆圈图标
import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';

// 定义 App 函数组件
function App() {
  // 使用 useDynamicList 管理一个字符串数组，默认值为 ['David', 'Jack']
  // list: 当前列表数据
  // remove: 删除指定索引项的方法
  // insert: 在指定位置插入新项的方法
  // replace: 替换指定索引项的方法
  const { list, remove, insert, replace } = useDynamicList(['David', 'Jack']);

  return (
    <div>
      hello App
      <br />

      {/* 遍历 list 渲染输入框和操作按钮 */}
      {list.map((item, index) => {
        return (
          <div key={index}>
            {/* 输入框绑定当前 item 值，并在变化时调用 replace 更新对应索引的值 */}
            <input
              type="text"
              value={item}
              onChange={(e) => replace(index, e.target.value)}
            />
            
            {/* 点击删除当前项 */}
            <MinusCircleOutlined onClick={() => remove(index)} />
            
            {/* 点击在当前位置后插入一个空字符串的新项 */}
            <PlusCircleOutlined onClick={() => insert(index + 1, '')} />
          </div>
        );
      })}

      <br />

      {/* 显示当前 list 的内容，以无序列表形式展示 */}
      <ul>
        {list.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

// 导出 App 组件
export default App;

✅ 功能总结

功能	描述
useDynamicList	提供对列表的增、删、改能力
input 输入框	实时更新列表项的内容
- 图标（MinusCircleOutlined）	删除当前行数据
+ 图标（PlusCircleOutlined）	在当前行下方插入新空白项
<ul> 列表	展示当前列表中的所有数据