반응에서 목록 상태를 변경하는 방법-프런트엔드 Q&A-php.cn

반응에서 목록 상태를 변경하는 방법

藏色散人

풀어 주다： 2023-01-09 10:32:23

원래의

1580명이 탐색했습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

React는 루프 목록의 현재 단일 하위 항목 상태를 수정합니다

Requirements

목록을 반복하고 공유 작업을 통해 특정 하위 항목을 클릭하면 이 하위 항목만 변경되며 다른 항목은 일정하게 변경되지 않습니다.

Idea

목록을 반복하고, index를 통해 원본 배열 항목을 변경하고, state를 통해 원본 배열을 변경하여 목록을 다시 렌더링합니다. index改变原数组项，并通过state更改原数组，使列表重新渲染。

使用UI组件

我这里用的React开发，插件使用antd

UI 구성 요소 사용

저는 여기서 개발을 위해 React를 사용하고 플러그인은 antd를 사용합니다. 아니요 위의 아이디어를 이해한다면 여기서 어떤 플러그인을 사용하든 상관없습니다.

코드 구현

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

로그인 후 복사