ホームページ > 記事 > ウェブフロントエンド > Reactで配列の要素を変更する方法
react で配列の要素を変更する方法: 1. 親コンポーネント App と子コンポーネント ToDoList を表示します; 2. 子コンポーネントをループして親コンポーネントから配列 ToDoList を表示し、 2 つのボタンは、対応する配列要素 ID を取得します; 3. サブコンポーネントから渡された ID を使用して、対応する配列要素の完成した値を変更します。
このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。
反応で配列の要素を変更するにはどうすればよいですか? ID で対応する配列要素を変更する方法
React ID:
1 で対応する配列要素を変更します。ここには、親コンポーネント App と子コンポーネントの 2 つのコンポーネントがあります。 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 に渡し、メソッド名前の変更が完了しました。同時に親コンポーネントの配列ToDoListも渡します。
<ToDoList ToDoList={this.state.ToDoList} changeTitle={this.changeCompleted} listDelete={this.listDelete} > </ToDoList>
1.3 子コンポーネントのループで親コンポーネントからの配列 ToDoList を表示し、2 つのボタンに対応する配列要素 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 ビデオ チュートリアル 」
以上がReactで配列の要素を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。