How to change list status in react-Front-end Q&A-php.cn

How to change list status in react

藏色散人

Release： 2023-01-09 10:32:23

Original

1520 people have browsed it

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

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

Code implementation

import React from &#39;react&#39;;
import { Layout,List, Button } from &#39;antd&#39;;

export default class App extends React.Component{ 
  state={    
     list:[
      {
        "seqNo": 1001,
        "appname_en": "Baidu&#39;s website",
      },
      {
        "seqNo": 1002,
        "appname_en": "Google&#39;s official website",
      },
      {
        "seqNo": 1003,
        "appname_en": "Amazon.com",
      },
      {
        "seqNo": 1004,
        "appname_en": "Sina website",
      },
      {
        "seqNo": 1005,
        "appname_en": "Tencent&#39;s official website",
      },
      {
        "seqNo": 1006,
        "appname_en": "Netease&#39;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 recordb5f5415：github.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!