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

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號
伊人久久精品无码麻豆一区| 久久久久成人精品一区二区| 无码中文字幕日韩专区视频 | 成人国产精品一级毛片视频| 国产精品揄拍一区二区久久 | 国产在线观看麻豆91精品免费 | 亚洲av日韩av综合| 国产成人精品三级麻豆| 国产日产欧产精品精品浪潮| 久久久国产亚洲精品| 精品国产sm捆绑最大网免费站 | 国内精品伊人久久久影院| 少妇人妻偷人精品视频| 久久久人妻精品无码一区| 国产精品成人久久久久三级午夜电影 | 精品日韩亚洲AV无码| 无码人妻精品一区二区三| 久久精品国产亚洲麻豆| 精品九九人人做人人爱| 97精品依人久久久大香线蕉97| 老司机亚洲精品影视www| 香蕉在线精品视频在线观看2| 久久精品国产清自在天天线| 久久国产热这里只有精品| 久久久久久无码国产精品中文字幕| 国产精品免费久久久久久久久| 无码精品久久一区二区三区| jazzjazz国产精品| 亚洲精品在线视频| 久久无码人妻精品一区二区三区| 91在线视频精品| 国内精品一级毛片免费看| 亚洲国产精品无码专区影院| 久久精品国产亚洲AV麻豆不卡| 久久久久久久国产精品电影 | 亚洲av日韩av无码av| 日韩在线视频不卡一区二区三区| 精品一区二区三区在线视频观看| 亚洲视频在线精品| 久久夜色精品国产亚洲av| 伊人久久综合精品无码AV专区|