时间戳

首页 > 解决方案 > 如何在点击时替换当前的下拉项目

javascript - 如何在点击时替换当前的下拉项目

问题描述

我有一个包含一些项目的下拉列表，当我单击下拉列表上的按钮时，我正在尝试替换它们。我正在尝试menuItems用newMenuItems点击替换。这是我的代码

const [data, setData] = React.useState(menuItems);

const menuItems = [
    { value: 'pdf', label: t('dashboardAsPDF'), group: 'image' },
    { value: 'png', label: t('dashboardAsPNG'), group: 'image' },
    { value: 'ecsv', label: t('exportSelection'), group: 'csv' },
];

const newMenuItems = [
    { value: 'csv', label: t('facebookCSV'), group: 'csv' },
    { value: 'gcsv', label: t('googleAdsCSV'), group: 'csv' },
];

const handleCSV = () => {
  //replace menu items logic goes here
};

return (
       <div key={'ExportMenu'}>
                {data.map((d: Item, index: number) => (
                    <StyledMenuItem value={d.value} selected={d.value === value} key={index}>
                        {d.value.toString().length > 1 ? (
                            <Label onClick={d.value === 'ecsv' ? () => handleCSV() : () => isCheckboxChecked(d.value.toString())}>{d.label}</Label>
                        ) : (
                                <Label key={'label'}>{d.label}</Label>
                            )}
                    </StyledMenuItem>
                ))}
            </div>

所以，我正在尝试将替换逻辑添加到handleCSV函数中，但我不确定如何执行此操作。一个例子将不胜感激！

标签： javascriptarraysreactjs

解决方案

您需要使用被useState调用的第二个解构参数setData，如下所示：

const handleCSV = () => {
  setData(newMenuItems)
}

这将从data变为menuItems，newMenuItems并且它将继续调用.map()over ，newMenuItems因为它现在存储在data

推荐阅读