Comment changer le statut de la liste en réaction

Comment changer l'état de la liste dans React : 1. Ouvrez le fichier de réaction correspondant ; 2. Parcourez une liste, puis modifiez les éléments du tableau d'origine via l'index 3. Modifiez le tableau d'origine via l'état pour restituer la liste ; .

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Comment changer le statut de la liste en réaction ?

React modifie l'état actuel d'un seul sous-élément d'une liste de boucles

Exigences

Bouclez une liste, et grâce à une opération partagée, lorsqu'un certain sous-élément est cliqué, seul ce sous-élément les éléments changent et les autres éléments changent de manière constante.

Idée

Parcourez une liste, modifiez les éléments du tableau d'origine via index et modifiez le tableau d'origine via state pour restituer la liste. 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:&#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>
    );
  }
}

代码使用

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

代码放在github

github项目链接：github.com/livaha/reac…

代码提交记录b5f5415

Utiliser les composants de l'interface utilisateur

J'utilise React pour le développement ici, et le plug-in utilise antd, non peu importe le plug-in utilisé ici, à condition que vous compreniez les idées ci-dessus.

Effet démo

Implémentation du code

rrreee

Utilisation du code Si vous utilisez le plug-in antd, copiez l'exemple de code ci-dessus et placez-le dans l'un de vos composants. Sinon, comprenez simplement que l'idée principale est de modifier le tableau d'origine afin que le tableau puisse être restitué. Si vous avez une meilleure idée, dites-le-moi s'il vous plaît~

Le code est placé sur github

🎜lien du projet github : github.com/livaha/reac…🎜🎜🎜Enregistrement de soumission de codeb5f5415 : 🎜github.com/livaha/reac…🎜🎜🎜Parce que le projet sera mis à jour à tout moment, donc 🎜Veuillez cliquer sur le lien d'enregistrement de soumission🎜🎜🎜Apprentissage recommandé : "🎜Tutoriel vidéo React 🎜"🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!