React에서 배열의 요소를 변경하는 방법: 1. 상위 구성 요소인 App과 하위 구성 요소인 ToDoList를 봅니다. 2. 하위 구성 요소를 반복하여 상위 구성 요소의 ToDoList 배열을 표시하고 두 개의 버튼이 해당 배열 요소 id ;3. 하위 구성 요소에서 전달된 id를 통해 해당 배열 요소의 완성된 값을 수정합니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.
React에서 배열의 요소를 어떻게 변경하나요? id를 통해 해당 배열 요소를 변경하는 방법은 무엇입니까?
React는 id:
1을 통해 해당 배열 요소를 변경합니다. 여기에는 상위 구성 요소인 App과 하위 구성 요소인 ToDoList의 두 가지 구성 요소가 있고 하위 구성 요소에서 전달된 id가 있습니다. -comComponent ToDoList가 상위 구성 요소 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 배열의 완료된 값을 변경하는 데 사용됩니다. 요소.
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를 통해 성공적으로 수정되므로 true와 false 사이를 전환할 수 있습니다.
추천 학습: "react 비디오 튜토리얼"
위 내용은 반응에서 배열의 요소를 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!