react如何改变列表状态

本篇内容介绍了“react如何改变列表状态”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

云岩网站建设公司创新互联建站,云岩网站设计制作，有大型网站制作公司丰富经验。已为云岩上千提供企业网站建设服务。企业网站搭建\成都外贸网站制作要多少钱，请找那个售后服务好的云岩做网站的公司定做！

react改变列表状态的方法：1、打开相应的react文件；2、循环一个列表，然后通过index改变原数组项；3、通过state更改原数组，使列表重新渲染即可。

React 修改循环列表的当前单个子项状态

需求

循环一个列表，通过共用的某个操作，点击某一个子项时，只让这个子项发生变化，其他项不变。

思路

循环一个列表，通过index改变原数组项，并通过state更改原数组，使列表重新渲染。

使用UI组件

我这里用的React开发， 插件使用antd， 这里无论什么插件使用，只要理解上面的思路即可。

演示效果

代码实现

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 (

                  className="demo-loadmore-list"
         itemLayout="horizontal"
         dataSource={this.state.list}
         renderItem={(item,index) => (
                        actions={[item.isReject===0?'已驳回':item.isReject===1?'已通过':<>
               this.handleItem(index,0)}>驳回,
               this.handleItem(index,1)}>通过
             ]}
           >
                            title={{item.appname_en}}
               description="Ant Design, a design language for background applications, is refined by Ant UED Team"
             />
             
content

           
         )}
       />

   

   );
 }
}

代码使用

如果你使用的时antd插件，上面例子代码复制下来，放到你的某个组件里即可。 如果不是，只要理解核心思想是改变了原数组，使重新渲染数组就好。 

“react如何改变列表状态”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！