站長資訊網
最全最豐富的資訊網站

react 怎么改變列表狀態

react改變列表狀態的方法:1、打開相應的react文件;2、循環一個列表,然后通過index改變原數組項;3、通過state更改原數組,使列表重新渲染即可。

react 怎么改變列表狀態

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

react 怎么改變列表狀態?

React 修改循環列表的當前單個子項狀態

需求

循環一個列表,通過共用的某個操作,點擊某一個子項時,只讓這個子項發生變化,其他項不變。

思路

循環一個列表,通過index改變原數組項,并通過state更改原數組,使列表重新渲染。

使用UI組件

我這里用的React開發,?插件使用antd, 這里無論什么插件使用,只要理解上面的思路即可。

演示效果

react 怎么改變列表狀態

代碼實現

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?'已通過':<>                 <Button type="dashed" onClick={()=>this.handleItem(index,0)}>駁回</Button>,                  <Button type="dashed" onClick={()=>this.handleItem(index,1)}>通過</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>     );   } }
登錄后復制

代碼使用

如果你使用的時antd插件,上面例子代碼復制下來,放到你的某個組件里即可。 如果不是,只要理解核心思想是改變了原數組,使重新渲染數組就好。 如果你有更好的思路,請告訴我哦~

代碼放在github

github項目鏈接:github.com/livaha/reac…

代碼提交記錄b5f5415:github.com/livaha/reac…

因為項目會隨時更新 ,所以請點提交記錄鏈接

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

贊(0)
分享到: 更多 (0)
網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
日韩AV毛片精品久久久| 99精品一区二区三区无码吞精| 国产精品免费久久久久影院| 日韩精品久久久久久| 国产视频精品视频| 国产精品无码亚洲精品2021| 99精品国产一区二区三区2021 | 精品一区高潮喷吹在线播放| 亚洲国产精品国自产电影| 好属妞这里只有精品久久| 国产情侣大量精品视频| 亚洲精品乱码久久久久久不卡| 日韩精品国产一区| 日韩精品久久久久久久电影| 国产在线精品一区二区在线看| 国产精品玩偶在线观看| 精品久久免费视频| 精品无码国产AV一区二区三区| 久久夜色撩人精品国产av| 亚洲AV无码成人精品区日韩| 十八禁无遮挡99精品国产| 亚洲精品无码不卡在线播放| 久久乐国产综合亚洲精品| 交换国产精品视频一区| 国内精品乱码卡1卡2卡3免费| 无码国产精品一区二区免费 | 国产69精品久久久久APP下载| 久久精品中文字幕大胸| 日韩精品无码区免费专区 | 中文字幕精品无码一区二区| 国产一区二区精品久久岳| 中文精品北条麻妃中文| 97视频在线观看这里只有精品 | 日产精品一卡2卡三卡4乱码| 亚洲精品无码久久久久秋霞| 亚洲a∨无码精品色午夜| 国产精品亚洲一区二区在线观看| 嫩草影院精品视频在线观看| 国产精品蜜芽tv在线观看| 日韩不卡手机视频在线观看| 亚洲av日韩av永久在线观看|