React select 框中的选项过滤器

Question

我有一个 select 框，需要填写 6 个选项。例如，

<select
                  id="watchSize"
                  className="form-select"
                  aria-label="Watch Size"
                >
                  <option selected>{post.size}</option>
                  <option>Normal</option>
                  <option>Big</option>
                  <option>Small</option>
                </select>

如您所见，select 框中有 3 种不同的尺寸。所以我定义了这些尺寸的硬编码，但我从 API 中获取手表的具体尺寸，就像 {post.size} 一样。所以，我想做的是，如果 {post.size} 是 Small，我不想在选项中显示 Small，在这种情况下值应该是 {post.size}。我希望我清楚。有什么办法可以做到吗？

[![在此处输入图片描述][1]][1]

谢谢...

Answer 1

你可以试试这个。在这里，我采用了一个尺寸数组并将选定的尺寸放在数组的前面，然后 Set 将采用唯一的项目来保持顺序。然后 map 函数返回所有的 jsx。

<select
    id="watchSize"
    className="form-select"
    aria-label="Watch Size"
    >
    {[...new Set([post.size, "Normal", "Big", "Small"])].map(i => <option selected={i===post.size}>{i}</option>)}
</select>

React select 框中的选项过滤器

Option filter in select box in React

api

select

option

reactjs