<dd id="3pk9i"><optgroup id="3pk9i"><video id="3pk9i"></video></optgroup></dd>
<rp id="3pk9i"></rp>

<dd id="3pk9i"><track id="3pk9i"></track></dd>
      1. <th id="3pk9i"></th>
        1. <ol id="3pk9i"><ruby id="3pk9i"></ruby></ol>

        2. react怎么改變數組中的某個元素-全球熱頭條

          來源:php中文網 | 2022-12-29 09:54:19 |

          本教程操作環境:Windows10系統、react18.0.0版、Dell G3電腦。


          (資料圖片僅供參考)

          react怎么改變數組中的某個元素?怎么通過id更改對應的數組元素?

          React 通過 id 更改對應的數組元素:

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

          1.1 父組件App有一個命名為ToDoList的數組,代碼如下:

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

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

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

          1.3 子組件中循環展示來自父組件的數組ToDoList,并且讓兩個按鈕取到對應的數組元素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>                            //根據id改變父組件中ToDoList數組的數組元素的Completed的值                            <button className="btn1" id={item.id} onClick={this.changeCompleted}>切換狀態</button>                            //根據id刪除父組件中ToDoList數組的數組元素                            <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.子組件的按鈕觸發父組件的事件changeCompleted并且從子組件帶來了按鈕對應數組元素的id值,用來更改對應id數組元素中的completed值。

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

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

          推薦學習:《react視頻教程》

          以上就是react怎么改變數組中的某個元素的詳細內容,更多請關注php中文網其它相關文章!

          關鍵詞: React

          中文字幕在线观看2021
          <dd id="3pk9i"><optgroup id="3pk9i"><video id="3pk9i"></video></optgroup></dd>
          <rp id="3pk9i"></rp>

          <dd id="3pk9i"><track id="3pk9i"></track></dd>
            1. <th id="3pk9i"></th>
              1. <ol id="3pk9i"><ruby id="3pk9i"></ruby></ol>