Hook + Ant Design 实现列表的增加和修改（弹出框）

2023-10-04 02:42:43

前言

在很多前端开发项目中，我们经常需要实现列表数据的增加和修改功能。传统的方法是使用传统的 HTML 表单和按钮来实现，但是这种方法比较繁琐，而且不够美观。随着 React 和 Ant Design 等前端框架和库的兴起，我们可以使用更加简单和优雅的方式来实现这些功能。

效果演示

在开始讲解之前，我们先来看一下最终的效果演示。

新增列表项

新增列表项效果图

修改列表项

修改列表项效果图

分析

对于以上的页面，先渲染出结构

const App = () => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const data = JSON.parse(localStorage.getItem('items'));
    if (data) {
      setItems(data);
    }
  }, []);

  const addItem = (item) => {
    setItems([...items, item]);
    localStorage.setItem('items', JSON.stringify([...items, item]));
  };

  const editItem = (item) => {
    const index = items.findIndex((i) => i.id === item.id);
    items[index] = item;
    setItems([...items]);
    localStorage.setItem('items', JSON.stringify([...items]));
  };

  const removeItem = (id) => {
    const newItems = items.filter((item) => item.id !== id);
    setItems(newItems);
    localStorage.setItem('items', JSON.stringify(newItems));
  };

  return (
    <div className="container">
      <h1>Todo List</h1>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            {item.name}
            <button onClick={() => editItem(item)}>编辑</button>
            <button onClick={() => removeItem(item.id)}>删除</button>
          </li>
        ))}
      </ul>
      <button onClick={() => addItem({ id: uuid(), name: '' })}>新增</button>
    </div>
  );
};

操作要点1：进入页面判断是清空页面还是赋值

首先，在进入页面时，我们需要判断是清空页面还是赋值。如果本地存储中有数据，则将数据赋值给 items 状态，否则将 items 状态清空。

useEffect(() => {
  const data = JSON.parse(localStorage.getItem('items'));
  if (data) {
    setItems(data);
  }
}, []);

操作要点2：判断是新增接口还是编辑接口

其次，我们需要判断是新增接口还是编辑接口。新增接口只需要调用 addItem 方法，将新的数据添加到 items 状态中，并将其存储到本地存储中。编辑接口需要先找到要编辑的数据在 items 状态中的索引，然后将修改后的数据更新到 items 状态中，并将其存储到本地存储中。

const addItem = (item) => {
  setItems([...items, item]);
  localStorage.setItem('items', JSON.stringify([...items, item]));
};

const editItem = (item) => {
  const index = items.findIndex((i) => i.id === item.id);
  items[index] = item;
  setItems([...items]);
  localStorage.setItem('items', JSON.stringify([...items]));
};