How to change list status in react

藏色散人
Release: 2023-01-09 10:32:23
Original
1553 people have browsed it

How to change the list state in react: 1. Open the corresponding react file; 2. Loop through a list, and then change the original array items through index; 3. Change the original array through state to re-render the list.

How to change list status in react

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

How to change the list status in react?

React Modifies the current single sub-item status of the loop list

Requirements

Loop a list through sharing For a certain operation, when a certain sub-item is clicked, only this sub-item will change, and other items will remain unchanged.

Idea

Loop a list, change the original array item through index, and change the original array through state, so that The list re-renders.

Using UI components

I use React for development, and the plug-in uses antd. No matter what plug-in is used here, Just understand the above ideas.

Demonstration effect

How to change list status in react

Code implementation

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:&#39;0 20px&#39;}}>
          <List
          className="demo-loadmore-list"
          itemLayout="horizontal"
          dataSource={this.state.list}
          renderItem={(item,index) => (
            <List.Item
              actions={[item.isReject===0?&#39;已驳回&#39;:item.isReject===1?&#39;已通过&#39;:<>
                <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>
    );
  }
}
Copy after login

Code usage

If You are using the antd plug-in. Just copy the above example code and put it in one of your components. If not, just understand that the core idea is to change the original array so that the array can be re-rendered. If you have a better idea, please tell me~

The code is placed on github

github project link:github.com/livaha/reac…

Code submission recordb5f5415github.com/livaha/reac…

Because the project will be updated at any time, so Please click on the submission record link

Recommended learning: "react video tutorial"

The above is the detailed content of How to change list status in react. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!