Comment changer le statut de la liste en réaction-Questions et réponses frontales-php.cn

Comment changer le statut de la liste en réaction

藏色散人

Libérer： 2023-01-09 10:32:23

original

1580 Les gens l'ont consulté

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

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，这里无论什么插件使用，只要理解上面的思路即可。

演示效果

Comment changer le statut de la liste en réaction

代码实现

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>
    );
  }
}

Copier après la connexion

代码使用

如果你使用的时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.