在 React 中在两个组件之间移动项目

2020-11-10 08:00飞浪

介绍

React 允许您通过 props 在组件之间共享数据。您的组件树可以这样构建：两个兄弟组件可以通过父组件的状态共享相同的数据。这个想法可以扩展到许多用例，例如在两个组件之间移动数据或项目以向用户传达不同的含义。

在本指南中，您将通过实际示例学习如何在 React 中的两个组件之间移动项目。

用例

需要在两个或多个组件之间移动项目的实际用例是任务管理 Web 应用程序，其中雇主更新给定任务的状态。在此示例中，您将构建一个任务管理器应用程序的简单版本，并使用 props 将项目从一个组件移动到另一个组件。为简洁起见，假设每个任务只有两种可能的状态，即已完成或待处理。单击按钮，您可以将特定任务从待处理移动到已完成，反之亦然。

执行

首先创建一个空的 React 项目。

      npx create-react-app react-taskmanager

转到App.css并添加以下样式。

      .App{
  background: lightgray;
  height: 100vh;
}


.items{
  padding: 60px 160px;
  display: flex;
  /* align-items: center; */
  justify-content: space-between;
}

.pending,.completed{
  background: #ffffff;
  width: 400px;
  padding: 10px 20px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.item{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

button{
  cursor: pointer;
  padding: 5px 10px;
  outline: none;
  border-radius: 10px;
  border: none;
}

.mark_complete{
  background: greenyellow;
}

.mark_pending{
  background: tomato;
  color: #ffffff;
}
    

在src文件夹中，创建三个组件：Items.js、Pending.js和Completed.js。顾名思义，这些组件将分别用于呈现所有项目、待处理项目和已完成项目。请查看以下样板以供参考。

      import React from 'react'

export const Pending = () => {

    return (
        <div className="pending">
            <h1>Pending</h1> 
        </div>
    )
}
    

类似地，您可以创建Completed.js。

      import React from 'react'

export const Completed = () => {

    return (
        <div className="completed">
            <h1>Completed</h1> 
        </div>
    )
}
    

在Items.js中渲染这两个组件。

      import React from 'react'
import { Completed } from './Completed'
import { Pending } from './Pending'

export const Items = () => {

    return (
        <div class="items">
            <Pending />
           	<Completed />
        </div>
    )
}
    

创建项目组件

由于Items 组件是Pending.js和Completed.js的父组件，因此它需要一个状态来存储所有项目，以及一个将项目从一个组件移动到另一个组件的方法。首先，创建一个状态来使用虚拟数据存储项目或任务，如下所示。

      import React,{useState,useEffect} from 'react'
import { Completed } from './Completed'
import { Pending } from './Pending'

export const Items = () => {
    const [items,setItems]=useState([
        {
            id: 1,
            title:'Manage ORM for client XYZ',
            status:'Pending'
        },
        {
            id: 2,
            title:'Review Summer Intern project report',
            status:'Pending'
        },
        {
            id: 3,
            title:'Host Landing Page for Gerry Pizza Shop',
            status:'Pending'
        },
        {
            id: 4,
            title:'Release Junior Developer payment',
            status:'Completed'
        },
        {
            id: 5,
            title:'Discuss Digital Marketing requirements ',
            status:'Completed'
        },
        {
            id: 6,
            title:'Discuss technology budget with CTO',
            status:'Pending'
        }
    ])
    return (
        <div class="items">
           <Pending/>
           <Completed/>
        </div>
    )
}
    

每个项目都是一个由多个属性组成的对象，其中包括一个status属性。status属性用于指示此项目所在的组件。例如，如果项目的状态为Pending ，它将在Pending组件内呈现，您可以将其移动到Completed组件。因此，将项目从一个组件移动到另一个组件只是意味着更改该特定项目的状态属性。

创建一个方法，该方法接受该项目的id和newStatus。循环遍历所有项目，使用传递给此方法的id找到要更新的项目，并将其状态更改为newStatus。

      const updateStatus=(id,newStatus)=>{
        let allItems=items;
        allItems=allItems.map(item=>{
            if(item.id===id){
                console.log('in here')
                item.status=newStatus;
            }
        return item
        })
        setItems(allItems)
  }
    

最后，将items和updateStatus传递给Completed和Pending组件。

      <Pending items={items} setItems={setItems} updateStatus={updateStatus}/>
<Completed items={items} setItems={setItems} updateStatus={updateStatus}/>
    

现在，上述两个组件都可以通过 props 访问来调用updateStatus方法。您可以在下面查看整个Items组件。

      import React,{useState,useEffect} from 'react'
import { Completed } from './Completed'
import { Pending } from './Pending'

export const Items = () => {
    const [items,setItems]=useState([
        {
            id: 1,
            title:'Manage ORM for client XYZ',
            status:'Pending'
        },
        {
            id: 2,
            title:'Review Summer Intern project report',
            status:'Pending'
        },
        {
            id: 3,
            title:'Host Landing Page for Gerry Pizza Shop',
            status:'Pending'
        },
        {
            id: 4,
            title:'Release Junior Developer payment',
            status:'Completed'
        },
        {
            id: 5,
            title:'Discuss Digital Marketing requirements ',
            status:'Completed'
        },
        {
            id: 6,
            title:'Discuss technology budget with CTO',
            status:'Pending'
        }
    ])
    const updateStatus=(id,newStatus)=>{
        let allItems=items;
        allItems=allItems.map(item=>{
            if(item.id===id){
                console.log('in here')
                item.status=newStatus;
            }
        return item
        })
        setItems(allItems)
    }
    return (
        <div class="items">
           <Pending items={items} setItems={setItems} updateStatus={updateStatus}/>
           <Completed items={items} setItems={setItems} updateStatus={updateStatus}/>
        </div>
    )
}
    

通过调用 updateStatus() 移动项目

最后一步是使用Pending和Completed组件中的Items组件的 props来呈现项目列表并为每个项目触发updateStatus() ，将该项目从其当前组件移动到下一个组件。您可以直接从 props解构项目和updateStatus()并循环遍历它们，如下所示。将onClick()事件附加到Mark Completed按钮，并传入当前项目ID和新状态Completed作为参数。在此组件内，仅渲染状态为Pending 的项目。 <font sty

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

曝光27902浏览1463