当前位置：首页 > React

如何用react做增删

2026-03-10 18:23:36React

使用React实现增删功能

在React中实现增删功能通常涉及状态管理和事件处理。以下是实现增删操作的完整方法。

状态初始化

使用useState钩子来管理数据列表和输入值。创建一个数组状态存储数据，另一个状态存储输入框内容。

const [items, setItems] = useState([]);
const [inputValue, setInputValue] = useState('');

添加功能实现

创建处理添加的函数，更新状态数组。需要防止空值提交并清空输入框。

const handleAdd = () => {
  if (inputValue.trim() === '') return;
  setItems([...items, inputValue]);
  setInputValue('');
};

删除功能实现

通过filter方法创建新数组实现删除。根据索引或唯一ID移除特定项。

const handleDelete = (index) => {
  setItems(items.filter((_, i) => i !== index));
};

完整组件示例

import React, { useState } from 'react';

function CrudExample() {
  const [items, setItems] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const handleAdd = () => {
    if (inputValue.trim() === '') return;
    setItems([...items, inputValue]);
    setInputValue('');
  };

  const handleDelete = (index) => {
    setItems(items.filter((_, i) => i !== index));
  };

  return (
    <div>
      <input
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={handleAdd}>添加</button>

      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item}
            <button onClick={() => handleDelete(index)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

使用唯一标识符

对于更复杂的场景，建议使用唯一ID而非索引作为key。

const [items, setItems] = useState([{id: 1, text: '示例'}]);

const handleAdd = () => {
  setItems([...items, {id: Date.now(), text: inputValue}]);
};

const handleDelete = (id) => {
  setItems(items.filter(item => item.id !== id));
};

性能优化

对于大型列表，考虑使用React.memo或useCallback优化渲染性能。

const MemoizedItem = React.memo(function Item({item, onDelete}) {
  return (
    <li>
      {item.text}
      <button onClick={() => onDelete(item.id)}>删除</button>
    </li>
  );
});

表单提交处理

添加表单提交事件处理，支持回车键提交。

如何用react做增删

<form onSubmit={(e) => {
  e.preventDefault();
  handleAdd();
}}>
  <input
    value={inputValue}
    onChange={(e) => setInputValue(e.target.value)}
  />
  <button type="submit">添加</button>
</form>