reactjs 在React-Select中显示多值的逆序

tktrz96b 于 2023-05-28 发布在 React

关注(0)|答案(1)|浏览(188)

我使用React-Select库来允许用户从下拉列表中选择多个选项。输入字段的空间有限，因此我修改了代码，只显示一个选择的选项，另一个标签显示选择的总数。
但是，要显示的一个选定选项应该是最后一个选定的选项，而不是第一个。
例如，在下面的截图中，我首先选择了“Ocean”，最后选择了“橙子”（即：“橙子”是最近选择的选项）。x1c 0d1x因此，我想在输入（我相信它被称为ValueContainer）字段中显示最近选择的选项“橙子”。
我该如何着手实现这一目标？
下面是我目前实现的一个最小工作示例：
https://codesandbox.io/s/react-select-multivalue-order-64tylo?file=/example.js

reactjs

来源：https://stackoverflow.com/questions/76332881/display-reverse-order-of-multi-values-in-react-select

1条答案

按热度按时间

fhg3lkii1#

试试这个

const MultiValue = ({ index, getValue, ...props }) => {
  const maxToShow = 1;
  const overflow = getValue()
    .slice(0, -maxToShow)
    .map((x) => x.label);

  return index === getValue().length-maxToShow ? ( //This is where you show the last value instead of the first
    <components.MultiValue {...props} />
  ) : index === maxToShow ? (
    <MoreSelectedBadge items={overflow} />
  ) : null;
};

Working example in codesandbox

赞(0）回复(0）举报 2023-05-28

我来回答

reactjs 在React-Select中显示多值的逆序

1条答案

相关问题

热门标签

最新问答