分享一下利用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 (<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>
    );
  }
}

以上就是利用react改变列表状态的方法分享，翼速应用平台内有更多相关资讯，欢迎查阅！