#javascript #reactjs
#javascript #reactjs
Вопрос:
Я хочу фильтровать свои данные и динамически отображать отфильтрованные данные в зависимости от того, какая кнопка нажата. Мой подход состоял в том, чтобы создать переменную и обновить ее при нажатии кнопки и передать эту переменную в функцию фильтра, однако у меня это не работает. Есть идеи? Вот фрагмент:
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>
))}
Ответ №1:
Я собрал рабочий пример. Вам необходимо сохранить текущий выбор в состоянии:
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>
))}
</>
);
}
Комментарии:
1. в качестве продолжения, как бы вы сопоставили все продукты на отфильтрованной странице?
2. Я не понимаю вопроса. Похоже, вы уже сопоставляете продукты с
li
элементами.
Ответ №2:
PageID
должно быть объявлено как состояние, чтобы быть реактивным, затем используйте его для обновления внутри обработчика нажатия кнопки :
const { PageID,setPageID} = React.useState('0')
const showPage = (event) =>{
setPageID(event.target.id)
}