站長(zhǎng)資訊網(wǎng)
react改變列表狀態(tài)的方法：1、打開(kāi)相應(yīng)的react文件；2、循環(huán)一個(gè)列表，然后通過(guò)index改變?cè)瓟?shù)組項(xiàng)；3、通過(guò)state更改原數(shù)組，使列表重新渲染即可。
本教程操作環(huán)境：Windows10系統(tǒng)、react18.0.0版、Dell G3電腦。
react 怎么改變列表狀態(tài)？
React 修改循環(huán)列表的當(dāng)前單個(gè)子項(xiàng)狀態(tài)
需求
循環(huán)一個(gè)列表，通過(guò)共用的某個(gè)操作，點(diǎn)擊某一個(gè)子項(xiàng)時(shí)，只讓這個(gè)子項(xiàng)發(fā)生變化，其他項(xiàng)不變。
思路
循環(huán)一個(gè)列表，通過(guò)
index改變?cè)瓟?shù)組項(xiàng)，并通過(guò)state更改原數(shù)組，使列表重新渲染。
使用UI組件
我這里用的
React開(kāi)發(fā)，?插件使用antd， 這里無(wú)論什么插件使用，只要理解上面的思路即可。
演示效果
代碼實(shí)現(xiàn)
import React from 'react'; import { Layout,List, Button } from 'antd'; export default class App extends React.Component{ state={ list:[ { "seqNo": 1001, "appname_en": "Baidu's website", }, { "seqNo": 1002, "appname_en": "Google's official website", }, { "seqNo": 1003, "appname_en": "Amazon.com", }, { "seqNo": 1004, "appname_en": "Sina website", }, { "seqNo": 1005, "appname_en": "Tencent's official website", }, { "seqNo": 1006, "appname_en": "Netease's official website", }, { "seqNo": 1007, "appname_en": "China yahoo website", } ] } handleItem=(index,isReject)=>{ let list = this.state.list; list[index].isReject = isReject; this.setState({ list }) } render(){ return (<div style={{padding:'0 20px'}}> <List className="demo-loadmore-list" itemLayout="horizontal" dataSource={this.state.list} renderItem={(item,index) => ( <List.Item actions={[item.isReject===0?'已駁回':item.isReject===1?'已通過(guò)':<> <Button type="dashed" onClick={()=>this.handleItem(index,0)}>駁回</Button>, <Button type="dashed" onClick={()=>this.handleItem(index,1)}>通過(guò)</Button></> ]} > <List.Item.Meta title={<a href="https://ant.design">{item.appname_en}</a>} description="Ant Design, a design language for background applications, is refined by Ant UED Team" /> <div>content</div> </List.Item> )} /> </div> ); } }
代碼使用
如果你使用的時(shí)antd插件，上面例子代碼復(fù)制下來(lái)，放到你的某個(gè)組件里即可。 如果不是，只要理解核心思想是改變了原數(shù)組，使重新渲染數(shù)組就好。 如果你有更好的思路，請(qǐng)告訴我哦~
代碼放在github
github項(xiàng)目鏈接：github.com/livaha/reac…
代碼提交記錄b5f5415：github.com/livaha/reac…
因?yàn)轫?xiàng)目會(huì)隨時(shí)更新 ，所以請(qǐng)點(diǎn)提交記錄鏈接
推薦學(xué)習(xí)：《react視頻教程》
