React:从列表中删除项目

在使用 React 开发 Web 应用程序时,有无数的情况需要我们渲染一个事物列表,例如用户列表、任务列表、产品列表等。在这些情况下,您可能需要添加一个删除列表中每个项目的按钮,以便人们可以丢弃他们不再需要的特定项目。

这篇实用的文章将引导您完成一个从 React 列表中删除项目的完整示例。我们将使用useState钩子和函数组件。

速记

假设我们有一个对象数组,每个对象都有一个名为id的属性。要删除与给定id关联的对象,我们可以使用Array.filter() 方法:

const updatedList = items.filter((item) => item.id !== id);

让我们看看我们将如何在 React 中应用它。

这个例子

应用预览

我们将要制作的演示会呈现一个项目列表。每个项目都带有一个X按钮(背景为红色),可用于删除相应的项目。

以下是它的工作原理:

React:从列表中删除项目

步骤

1.新建一个React项目:

npx create-react-app kindacode-list-items example

2. src/App.js中的完整源代码:

// KindaCode.com
// src/App.js
import { useState } from 'react';
import './App.css';

function App() {
  // Declare the state variable, which we'll call "items"
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
    { id: 5, name: 'Item 4 - KindaCode.com' },
    { id: 4, name: 'Item 4' },
  ]);

  // Delete the item with the given id
  // This function will be called when an "X" button is clicked
  const removeItem = (id) => {
    const updatedList = items.filter((item) => item.id !== id);
    setItems(updatedList);
  };

  return (
    <div className='container'>
      <h2>KindaCode.com - Demo App</h2>
      <p>You can delete an item by using the "X" button associated with it</p>

      {/* Implement the list */}
      <div className='list'>
        {items.map((item) => (
          <div className='item' key={item.id}>
            <span className='item-name'>{item.name}</span>
            <button
              className='delete-button'
              onClick={() => removeItem(item.id)}
            >
              X
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

3. src/App.js的 CSS 代码:

/* KindaCode.com */
/* src/App.css */
.container {
    width: 80%;
    margin: 40px auto;
}

.list {
    margin-top: 30px;
}

.item {
    margin: 5px 0px;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.item:hover {
    background: #ddd;
}

.item-name {
    font-size: 16px;
}

.delete-button {
    padding: 6px 10px;
    background: red;
    color: #fff;
    font-weight: bold;
    font-size: 19px;
    border: none;
    cursor: pointer;
}

.delete-button:hover {
    background: #c00;
}
  1. 启动应用程序:
npm start

后记

我们已经检查了一个端到端的完整示例,该示例演示了如何从列表中删除项目。这是构建现代 Web 应用程序时必不可少的知识基础。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » React:从列表中删除项目