javascript - 如何使用 React 在 javascript 上的事件函数中传递数组?
问题描述
有两个屏幕。第一张图是节目单。如果单击搜索按钮旁边的按钮,则会显示第二张图片。其次是选择过滤器。当用户在过滤器中选择选项并单击“적용”按钮时,列表将被更改。
这里有代码。
...
const [modalOpen, setModalOpen] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
const [postsPerPage] = useState(6);
const [area] = useState(location.state.area)
const [city] = useState(location.state.city)
// all list
const locList = restList.filter(
key => (key.address.includes(area) && key.address.includes(city))
);
//about Modal
const openModal = () => {
setModalOpen(true);
}
const closeModal = () => {
setModalOpen(false);
}
...
let target;
let foodList = [[], []]
const sel_Food = (e) => {
if (e.target.tagName === "BUTTON") {
target = e.target.innerText;
if (!foodList.includes(target))
foodList[0].push(target)
} else {
target = e.target.parentNode.nextSibling.innerText;
foodList[1] = target
}
}
//make list
const list = (foodList) => {
let result = [];
if (foodList[0].length === 1) {
result = locList.filter(key => key.foodType.includes(foodList[0][0]))
} else {
for (let i = 0; i < foodList[0].length; i++) {
let tmp = locList.filter(key => key.foodType.includes(foodList[0][i]))
result.push(...tmp)
}
}
if (foodList[1].length != 0) {
result = result.filter(key => key.friendly.includes(foodList[1]))
}
return result
}
return (
<div>
... {
(locList.length === 0)
? ...
: <div>
<div className="btn_class_list">
...
<React.Fragment>
<button className="button_filter" onClick={openModal}><img className="icon_filter" src={icon_filter} alt="icon_filter"/></button>
<Modal_Restaurant open={modalOpen} close={closeModal} header="필터">
<p className="langoption">음식 종류</p>
<div>
...
</div>
<p className="langoption">Halal Standard</p>
<div className="foodtype">
...
</div>
</Modal_Restaurant>
</React.Fragment>
</div>
<Item rlist={currentPosts(locList)} moveTo="restaurant" area={area} city={city}></Item> //make List
<Pagination start={numOfFirst} last={numOfLast} paginate={setCurrentPage}></Pagination>
</div>
}
</div>
)
sel_Food 用户选择的功能记录选项。列表功能为交付给项目组件制作子列表。但我不知道如何使用“적용”按钮将数组结果传递给列表功能。
谢谢你。
解决方案
我从问题中了解到,您需要根据用户应用的过滤器更改您显示的项目列表。可以通过国家来完成。首先,您可以尝试通过过滤器函数更新项目列表,并使用状态变量来呈现过滤后的结果。您曾询问单击按钮时是否返回值。按钮在 React 中有一个 onClick 处理程序。你可以给它传递一个这样的函数:
<Button onClick={handleClick} />
或者如果您的函数接受任何参数:
<Button onClick={() => handlClick(args)} />
推荐阅读
- javascript - JavaScript 数组删除重复的单词或字符(如果只输入字符。不要从 1 个单词中删除所有重复项
- javascript - 如何使用 Mongoose 检索多个集合
- python - Python值重塑问题
- r - 从 R 中的 URL 下载和读取 Excel 文件时出错
- javascript - 获取错误函数的名称
- swift - 平滑色度键的边缘 -CoreImage
- json - 如何在不进行语法检查的情况下美化 json 文件?
- vb.net - 通过 USB 将原始文本发送到打印机
- parallel-processing - PBS 扭矩:如何解决时间相差很大的并行任务中的核心浪费问题?
- javascript - React - 如何从循环中获取输入