Question

我正在自定义下拉菜单https://codesandbox.io/s/elated-driscoll-cjkcj。我希望当用户从下拉菜单中选择元素时不再在列表中显示该项目。这是我第一次单击“选择”时的外观

然后，当我选择该项目并再次打开下拉菜单时，该元素将显示在列表中

我想将其从该列表中删除，请勿再次显示。检查https://codesandbox.io/s/elated-driscoll-cjkcj以获得完整代码

 <DropdownContentUI isOpen={isOpen}>
        {arrayOfSvg.map((item, idx) => {
          const { svg } = item;
          return (
             <DropdownArrowsWrapperUI key={idx} onClick={() => SelectIcon(idx)}>
              {svg}
            </DropdownArrowsWrapperUI>
          );
        })}
      </DropdownContentUI>

Answer 1

<DropdownContentUI isOpen={isOpen}>
    {arrayOfSvg.map((item, idx) => {
      const { svg } = item;
      if(isSelected != idx){
        return (
          <DropdownArrowsWrapperUI key={idx} onClick={() => SelectIcon(idx)}>
            {svg}
          </DropdownArrowsWrapperUI>
        );
      }
    })}
  </DropdownContentUI>

Answer 2

您必须先过滤选项列表，然后才能进行映射。

<DropdownContentUI isOpen={isOpen}>
        {arrayOfSvg
          .filter((item, idx) => idx !== isSelected)
          .map((item, idx) => {
            const { svg } = item;
            return (
              <DropdownArrowsWrapperUI
                key={idx}
                onClick={() => SelectIcon(idx)}
              >
                {svg}
              </DropdownArrowsWrapperUI>
            );
          })}
      </DropdownContentUI>

自定义反应选择，过滤列表

2 个答案: