当前位置：首页 > 文章列表 > 文章 > 前端 > React添加列表项方法详解

React添加列表项方法详解

2026-02-26 18:10:00 0浏览收藏

本文手把手教你用 React 的 useState Hook 实现点击添加列表项的核心功能：通过两个输入框收集数据、点击按钮将组合内容（如“ItemName $50”）动态追加到状态数组，并利用 .map() 渲染带唯一 key 的 `
` 列表——彻底告别原生 DOM 操作，真正掌握 React “状态驱动视图”的函数式编程范式，同时规避 key 缺失、异步更新陷阱、空值插入等常见坑点，让初学者一步到位写出规范、健壮、可维护的动态列表代码。

如何在 React 中点击按钮动态添加列表项（li）

本文介绍如何使用 React 的 useState Hook 管理列表状态，通过点击按钮将两个输入框的值组合后动态渲染为
元素，并插入到
中，涵盖状态设计、事件处理、列表映射与关键注意事项。

本文介绍如何使用 React 的 useState Hook 管理列表状态，通过点击按钮将两个输入框的值组合后动态渲染为 `

` 元素，并插入到 `

在 React 中，不能直接“创建 DOM 元素”并插入页面（如原生 JS 的 document.createElement），而应通过状态驱动 UI 渲染：将待显示的数据存入状态数组，再用 .map() 动态生成 JSX 列表项。这是函数式组件实现动态列表的核心范式。

✅ 正确实现步骤

声明列表状态：使用 useState([]) 存储所有待渲染的
文本内容（推荐字符串数组，语义清晰）；
收集输入值：为两个 <input> 分别绑定 onChange，更新对应状态（注意变量名修正：firtValue → firstValue 更规范，但此处沿用原代码保持兼容）；
点击时更新状态：在 onClick 回调中，将当前两个输入值拼接（如 "ItemName $50"），并追加到列表状态中；
渲染列表：在 JSX 中对状态数组执行 .map()，为每个元素生成带唯一 key 的
。

以下是精简优化后的核心逻辑（已修复原代码中的拼写错误与逻辑缺陷）：

import { useState } from 'react';

function App() {
  const [income, setIncome] = useState(0);
  const expense = 10;
  const balance = income - expense;
  const [firstValue, setFirstValue] = useState(''); // 修正变量名（可选）
  const [secValue, setSecValue] = useState('');
  // ✅ 新增：存储所有待显示的列表项文本
  const [items, setItems] = useState([]);

  const handleFirstChange = (e) => setFirstValue(e.target.value);
  const handleSecChange = (e) => setSecValue(e.target.value);

  const handleChange = (e) => setIncome(e.target.value);

  const maxLengthCheck = (e) => {
    if (e.target.value.length > e.target.maxLength) {
      e.target.value = e.target.value.slice(0, e.target.maxLength);
    }
  };

  // ✅ 点击时将组合值追加到 items 数组
  const handleClick = () => {
    if (firstValue.trim() && secValue.trim()) {
      setItems(prev => [...prev, `${firstValue} $${secValue}`]);
      // 可选：清空输入框
      setFirstValue('');
      setSecValue('');
    }
  };

  // ✅ 动态渲染列表：必须提供 key！
  const listItemElements = items.map((item, index) => (
    <li key={index}>{item}</li>
  ));

  return (
    <div>
      {/* ... 其他 JSX 保持不变 ... */}

      <div className="add-item">
        Item
        &lt;input
          type=&quot;text&quot;
          className=&quot;adding-input&quot;
          placeholder=&quot;Add Item&quot;
          onChange={handleFirstChange}
        /&gt;
      </div>

      <div className="add-item">
        Amount
        &lt;input
          type=&quot;number&quot;
          className=&quot;adding-input&quot;
          placeholder=&quot;Add Amount&quot;
          onChange={handleSecChange}
        /&gt;
      </div>

      <div className="add-button">
        <button type="button" className="expense-button" onClick={handleClick}>
          Add Expense
        </button>
      </div>

      <div>
        <ul>{listItemElements}</ul>
      </div>
    </div>
  );
}

export default App;

⚠️ 关键注意事项

key 属性不可省略：.map() 生成列表时，React 要求每个子元素有稳定唯一的 key。若数据含 ID，优先用 item.id；否则可用 index（仅适用于简单、无顺序变更的场景）；
避免直接调用函数渲染：原代码中 {listOfLi()} 是错误的——listOfLi 是函数而非 JSX，且未触发重渲染。正确做法是让 listOfLi 成为计算属性（即 const listOfLi = items.map(...)），并在 JSX 中直接 {listOfLi}；
输入校验提升体验：示例中增加了 if (firstValue.trim() && secValue.trim()) 判断，防止空条目；
状态更新是异步的：setItems 使用函数式更新（prev => [...]）可确保基于最新状态，避免闭包问题；
命名规范建议：将 firtValue 改为 firstValue、hadnleChane 改为 handleFirstChange 等，增强可维护性（生产环境强烈推荐）。

通过以上模式，你不仅能实现动态添加列表项，更掌握了 React “状态 → 视图” 单向数据流的核心思想——UI 是状态的映射，操作 UI 即操作状态。

终于介绍完啦！小伙伴们，这篇关于《React添加列表项方法详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！