如何使用 React 在 javascript 上的事件函数中传递数组？答案

【问题标题】：How can delivered array in event function on javascript with React?如何使用 React 在 javascript 上的事件函数中传递数组？
【发布时间】：2021-10-09 11:01:36
【问题描述】：

有两个屏幕。第一张图是节目单。如果单击搜索按钮旁边的按钮，则会显示第二张图片。其次是选择过滤器。当用户在过滤器中选择选项并单击“적용”按钮时，列表将被更改。

这里有代码。

    ...
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 函数记录选项。列表功能为交付给项目组件制作子列表。但我不知道如何使用“적용”按钮将数组结果传递到列表功能。

谢谢。

【问题讨论】：

标签： javascript reactjs react-hooks rendering react-props

【解决方案1】：

据我了解，您需要根据用户应用的过滤器更改显示的项目列表。可以通过国家来完成。首先，您可以尝试通过过滤器函数更新项目列表，并使用状态变量来呈现过滤后的结果。您曾询问单击按钮时是否返回值。按钮在 React 中有一个 onClick 处理程序。你可以给它传递一个这样的函数：

<Button onClick={handleClick} />

或者如果你的函数有任何参数：

<Button onClick={() => handlClick(args)} />

【讨论】：