So ändern Sie den Listenstatus in React

So ändern Sie den Listenstatus in React: 1. Öffnen Sie die entsprechende React-Datei. 2. Durchlaufen Sie eine Liste und ändern Sie dann die ursprünglichen Array-Elemente über den Index. 3. Ändern Sie den ursprünglichen Array-Status, um die Liste neu zu rendern .

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Wie ändere ich den Listenstatus in React?

React ändert den aktuellen Status eines einzelnen Unterelements einer Schleifenliste

Anforderungen

Schleife eine Liste und durch eine gemeinsame Operation wird beim Klicken auf ein bestimmtes Unterelement nur dieses Unterelement angezeigt Artikel ändern sich, und andere Artikel ändern sich konstant.

Idee

Durchlaufen Sie eine Liste, ändern Sie die ursprünglichen Array-Elemente über index und ändern Sie das ursprüngliche Array über state, um die Liste neu zu rendern. 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

UI-Komponenten verwenden

Ich verwende hier React für die Entwicklung, und das Plug-in verwendet antd, nein Egal welches Plug-In hier verwendet wird, solange Sie die oben genannten Ideen verstehen.

Demo-Effekt

Code-Implementierung

rrreee

Code-Nutzung Wenn Sie das antd-Plug-in verwenden, kopieren Sie den obigen Beispielcode und fügen Sie ihn in eine Ihrer Komponenten ein. Wenn nicht, verstehen Sie einfach, dass die Kernidee darin besteht, das ursprüngliche Array so zu ändern, dass das Array erneut gerendert werden kann. Wenn Sie eine bessere Idee haben, sagen Sie es mir bitte ~

Der Code ist auf Github platziert

🎜Github-Projektlink:

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Listenstatus in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!