当前位置：首页 > React

react实现批量新增代码

2026-01-27 14:40:03React

React 实现批量新增功能

批量新增功能通常涉及表单数据收集、状态管理和后端API交互。以下是实现步骤：

状态管理 使用React的useState或useReducer管理批量数据

const [items, setItems] = useState([{ id: 1, name: '', value: '' }]);

动态表单渲染 根据状态数组渲染多个表单输入项

{items.map((item, index) => (
  <div key={item.id}>
    <input 
      value={item.name}
      onChange={(e) => handleChange(index, 'name', e.target.value)}
    />
    <input
      value={item.value}
      onChange={(e) => handleChange(index, 'value', e.target.value)}
    />
  </div>
))}

处理输入变化

const handleChange = (index, field, value) => {
  const newItems = [...items];
  newItems[index][field] = value;
  setItems(newItems);
};

添加新表单项

const addNewItem = () => {
  setItems([...items, { 
    id: Date.now(), 
    name: '', 
    value: '' 
  }]);
};

提交批量数据

const handleSubmit = async () => {
  try {
    const response = await axios.post('/api/items/batch', {
      items: items.filter(item => item.name && item.value)
    });
    console.log('批量创建成功', response.data);
  } catch (error) {
    console.error('批量创建失败', error);
  }
};

优化批量新增体验

表单验证 添加客户端验证确保数据完整性

const isValid = items.every(item => item.name && item.value);

性能优化 对于大型数据集考虑虚拟滚动

import { FixedSizeList as List } from 'react-window';

<List
  height={400}
  itemCount={items.length}
  itemSize={50}
>
  {({ index, style }) => (
    <div style={style}>
      {/* 渲染表单项 */}
    </div>
  )}
</List>

删除单项功能

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

后端接口处理

Node.js示例处理批量请求

router.post('/batch', async (req, res) => {
  try {
    const result = await Item.insertMany(req.body.items);
    res.status(201).json(result);
  } catch (err) {
    res.status(400).json({ error: err.message });
  }
});

Spring Boot示例

@PostMapping("/batch")
public ResponseEntity<List<Item>> createBatch(@RequestBody List<Item> items) {
    List<Item> savedItems = itemRepository.saveAll(items);
    return new ResponseEntity<>(savedItems, HttpStatus.CREATED);
}

react实现批量新增代码