第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

根據(jù)按鈕 ID 進(jìn)行過濾

根據(jù)按鈕 ID 進(jìn)行過濾

弒天下 2023-10-14 11:11:08
我想過濾我的數(shù)據(jù)并根據(jù)單擊的按鈕動(dòng)態(tài)顯示過濾后的數(shù)據(jù)。我的方法是創(chuàng)建一個(gè)變量并在按下按鈕時(shí)更新它并將該變量傳遞給過濾器函數(shù),但是,這對(duì)我不起作用。有任何想法嗎?這是一個(gè)片段:var PageID = "0"const showPage = (event) =>{PageID = event.target.id}<button id = "1" onClick = {showPage}>1</button><button id = "2" onClick = {showPage}>2</button><button id = "3" onClick = {showPage}>3</button><button id = "4" onClick = {showPage}>4</button><button id = "5" onClick = {showPage}>5</button>{data.pages.filter(page => page.id == PageID).map(filteredid =>(  <li>    <div className="description_box">      <img src={filteredid.products[0].img}/>      <h2>{filteredid.products[0].title}</h2>      <p>{filteredid.products[0].description}</p>    </div>  </li>))}
查看完整描述

2 回答

?
慕斯王

TA貢獻(xiàn)1864條經(jīng)驗(yàn) 獲得超2個(gè)贊

我整理了一個(gè)工作示例。您需要將當(dāng)前選擇存儲(chǔ)在狀態(tài)中:

import React, { useState } from "react";

import "./styles.css";


export default function App() {

? const [pageId, setPageId] = useState("0");


? const showPage = (event) => {

? ? setPageId(event.target.id);

? };


? const data = {

? ? pages: [

? ? ? {

? ? ? ? id: "1",

? ? ? ? products: [

? ? ? ? ? { img: "test", title: "Title 1", description: "Description 1" },

? ? ? ? ? { img: "test", title: "Title 2", description: "Description 2" }

? ? ? ? ]

? ? ? }

? ? ]

? };


? return (

? ? <>

? ? ? <button id="1" onClick={showPage}>

? ? ? ? 1

? ? ? </button>

? ? ? <button id="2" onClick={showPage}>

? ? ? ? 2

? ? ? </button>

? ? ? <button id="3" onClick={showPage}>

? ? ? ? 3

? ? ? </button>

? ? ? <button id="4" onClick={showPage}>

? ? ? ? 4

? ? ? </button>

? ? ? <button id="5" onClick={showPage}>

? ? ? ? 5

? ? ? </button>


? ? ? {data.pages

? ? ? ? .filter((page) => page.id === pageId)

? ? ? ? .map((filteredid) => (

? ? ? ? ? <li>

? ? ? ? ? ? <div className="description_box">

? ? ? ? ? ? ? <img src={filteredid.products[0].img} />

? ? ? ? ? ? ? <h2>{filteredid.products[0].title}</h2>

? ? ? ? ? ? ? <p>{filteredid.products[0].description}</p>

? ? ? ? ? ? </div>

? ? ? ? ? </li>

? ? ? ? ))}

? ? </>

? );

}


查看完整回答
反對(duì) 回復(fù) 2023-10-14
?
守著星空守著你

TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超8個(gè)贊

PageID應(yīng)將其聲明為狀態(tài)以便具有反應(yīng)性,然后使用它的設(shè)置器在按鈕單擊處理程序內(nèi)進(jìn)行更新:


const { PageID,setPageID} = React.useState('0')

const showPage = (event) =>{

setPageID(event.target.id)

}


查看完整回答
反對(duì) 回復(fù) 2023-10-14
  • 2 回答
  • 0 關(guān)注
  • 141 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)