Bagaimana untuk menukar elemen dalam tatasusunan dalam bertindak balas

Cara menukar elemen dalam tatasusunan dalam bertindak balas: 1. Lihat Apl komponen induk dan ToDoList komponen anak 2. Gelung melalui komponen anak untuk memaparkan tatasusunan ToDoList daripada komponen induk, dan biarkan dua butang mendapatkan id elemen tatasusunan yang sepadan 3. Ubah suai nilai lengkap elemen tatasusunan yang sepadan melalui id yang diluluskan daripada subkomponen.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Bagaimana untuk menukar elemen dalam tatasusunan sebagai tindak balas? Bagaimana untuk menukar elemen tatasusunan yang sepadan melalui id?

React menukar elemen tatasusunan yang sepadan melalui id:

1 Terdapat dua komponen di sini, Apl komponen induk dan komponen anak ToDoList Tukar kandungan elemen tatasusunan dalam Apl komponen induk melalui id yang diluluskan dalam ToDoList komponen anak.

1.1 Apl komponen induk mempunyai tatasusunan bernama ToDoList, kodnya adalah seperti berikut:

this.state = {
     ToDoList:[
       {
         id:1,
         title:'吃饭',
         completed:true
       },
       {
        id:2,
        title:'睡觉',
        completed:false
      },
      {
        id:3,
        title:'学习',
        completed:true
      }
     ]
  }

1.2 Kami menghantar kaedah dalam Apl komponen induk kepada ToDoList subkomponen, dan kaedah itu dinamakan changeCompleted. Pada masa yang sama, tatasusunan ToDoList komponen induk juga diluluskan.

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

1.3 Paparkan tatasusunan ToDoList daripada komponen induk dalam gelung dalam komponen anak, dan biarkan kedua-dua butang mendapatkan id elemen tatasusunan yang sepadan.

import React, { Component } from 'react'
import './ToDoList.css'
export default class ToDoList extends Component {
    render() {
        return (
            <div className=&#39;ToDoList&#39;>
                <ul>
                    {
                        this.props.ToDoList.map((item)=>{
                        return <li key={item.id}>
                            {item.title}
                            <p>{item.completed?&#39;已完成&#39;:&#39;未完成&#39;}</p>
                            <div>
                            //根据id改变父组件中ToDoList数组的数组元素的Completed的值
                            <button className=&#39;btn1&#39; id={item.id} onClick={this.changeCompleted}>切换状态</button>
                            //根据id删除父组件中ToDoList数组的数组元素
                            <button className=&#39;btn2&#39; 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 Butang komponen anak mencetuskan perubahan peristiwa Selesai komponen induk dan membawa nilai id elemen tatasusunan yang sepadan dengan butang daripada komponen anak, yang digunakan untuk menukar yang telah selesai. nilai dalam elemen tatasusunan id yang sepadan.

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 Di sini, nilai lengkap elemen tatasusunan yang sepadan berjaya diubah suai melalui id yang diluluskan oleh subkomponen, supaya ia boleh ditukar antara benar dan palsu.

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Bagaimana untuk menukar elemen dalam tatasusunan dalam bertindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!