当前位置：首页 > React

react实现新增列表

2026-01-27 18:50:29React

实现新增列表功能

在React中实现新增列表功能通常涉及状态管理、表单处理和列表渲染。以下是具体实现方法：

状态管理

使用useState钩子管理列表数据和输入框内容：

const [items, setItems] = useState([]);
const [newItem, setNewItem] = useState('');

添加项目函数

创建处理新增项目的函数：

react实现新增列表

const addItem = () => {
  if (newItem.trim() !== '') {
    setItems([...items, newItem]);
    setNewItem('');
  }
};

表单渲染

构建输入表单和按钮：

<div>
  <input
    type="text"
    value={newItem}
    onChange={(e) => setNewItem(e.target.value)}
    placeholder="输入新项目"
  />
  <button onClick={addItem}>添加</button>
</div>

列表渲染

使用map方法渲染列表：

react实现新增列表

<ul>
  {items.map((item, index) => (
    <li key={index}>{item}</li>
  ))}
</ul>

完整组件示例

import React, { useState } from 'react';

function ItemList() {
  const [items, setItems] = useState([]);
  const [newItem, setNewItem] = useState('');

  const addItem = () => {
    if (newItem.trim() !== '') {
      setItems([...items, newItem]);
      setNewItem('');
    }
  };

  return (
    <div>
      <input
        type="text"
        value={newItem}
        onChange={(e) => setNewItem(e.target.value)}
        placeholder="输入新项目"
      />
      <button onClick={addItem}>添加</button>

      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default ItemList;

键盘支持

添加回车键提交支持：

const handleKeyPress = (e) => {
  if (e.key === 'Enter') {
    addItem();
  }
};

// 在input中添加
onKeyPress={handleKeyPress}

删除功能扩展

可选地添加删除项目功能：

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

// 修改列表渲染部分
{items.map((item, index) => (
  <li key={index}>
    {item}
    <button onClick={() => removeItem(index)}>删除</button>
  </li>
))}

这些代码片段展示了在React中实现新增列表功能的核心逻辑，可以根据具体需求进行扩展和调整。