react如何改變數(shù)組中的某個元素

這篇“react如何改變數(shù)組中的某個元素”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“react如何改變數(shù)組中的某個元素”文章吧。

react改變數(shù)組中的某個元素的方法：1、查看父組件App和子組件ToDoList；2、在子組件中循環(huán)展示來自父組件的數(shù)組ToDoList，并且讓兩個按鈕取到對應的數(shù)組元素id；3、通過子組件傳過來的id修改對應數(shù)組元素的completed值即可。

React 通過 id 更改對應的數(shù)組元素:

1.此處有兩個組件，父組件App，子組件ToDoList，通過子組件ToDoList中傳過來的id更改父組件App中的數(shù)組元素內容。

1.1 父組件App有一個命名為ToDoList的數(shù)組，代碼如下：

  this.state = {
       ToDoList:[
         {
           id:1,
           title:'吃飯',
           completed:true
         },
         {
          id:2,
          title:'睡覺',
          completed:false
        },
        {
          id:3,
          title:'學習',
          completed:true
        }
       ]
    }

1.2 我們在父組件App中給子組件ToDoList傳遞一個方法，方法名為changeCompleted。同時也把父組件的數(shù)組ToDoList傳過去。

    <ToDoList
       ToDoList={this.state.ToDoList} 
       changeTitle={this.changeCompleted}
   listDelete={this.listDelete}
       >
       </ToDoList>

1.3 子組件中循環(huán)展示來自父組件的數(shù)組ToDoList，并且讓兩個按鈕取到對應的數(shù)組元素id。

import React, { Component } from 'react'
import './ToDoList.css'
export default class ToDoList extends Component {
    render() {
        return (
            <div className='ToDoList'>
                <ul>
                    {
                        this.props.ToDoList.map((item)=>{
                        return <li key={item.id}>
                            {item.title}
                            <p>{item.completed?'已完成':'未完成'}</p>
                            <div>
                            //根據(jù)id改變父組件中ToDoList數(shù)組的數(shù)組元素的Completed的值
                            <button className='btn1' id={item.id} onClick={this.changeCompleted}>切換狀態(tài)</button>
                            //根據(jù)id刪除父組件中ToDoList數(shù)組的數(shù)組元素
                            <button className='btn2' id={item.id} onClick={this.listDelete}>刪除</button>
                            </div>
                          </li>
                        })
                    }
                </ul>
              
            </div>
        )
    }
    listDelete=(e)=>{
        this.props.listDelete(e.target.id)
    }
    changeCompleted=(e)=>{
        this.props.changeCompleted(e.target.id)
    }
}

2.子組件的按鈕觸發(fā)父組件的事件changeCompleted并且從子組件帶來了按鈕對應數(shù)組元素的id值，用來更改對應id數(shù)組元素中的completed值。

  changeCompleted=(id1)=>{
    // 傳過來的id不是數(shù)字類型，這里進行強制轉換，不然下面的if語句無法判斷
    const id2=Number(id1)
    //map遍歷的數(shù)組元素是對象的話，會修改原數(shù)組的值，也就是會修改this.state的值，這之前建議深拷貝原數(shù)組再操作，個人淺見。
    //最簡單的深拷貝(JSON.stringify() 和JSON.parse())
    //先把對象使用JSON.stringify()轉為字符串，再賦值給另外一個變量，然后使用JSON.parse()轉回來即可。
    //深拷貝
    const ToDoList1 = JSON.parse( JSON.stringify([...this.state.ToDoList]))
    this.setState({
      //將拷貝的數(shù)組展開每一項，對每一項的id和傳過來的id2進行對比，如果和傳過來的id相同，說明
      //找到了需要修改的哪一項，然后將那一項的completed取反即可。
      ToDoList:ToDoList1.map((item)=>{
        if(item.id===id2){
          item.completed = !item.completed
        }
        //id不同就直接返回原來的值不修改，無論修改與否的的值都在這里返回
        return item
      })
    })
  }

2.1 這里就成功通過子組件傳過來的id修改了對應數(shù)組元素的completed值，使其可以在true和false之間切換。

以上就是關于“react如何改變數(shù)組中的某個元素”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業(yè)資訊頻道。