Question

我目前正在使用语义ui react ，我有一个下拉列表，其中包含过滤数据的选项。但是这个选项依赖于数组的映射。我希望有这个选项和另一个选择所有选项的选项。我如何显示这两个选项？

这是我尝试同时使用这两个选项

const projectOptions = this.props.projects.map(project => ([{
        text: project.name,
        value: project.id.toString(),
        key: project.id
    },
        {
            text: "Select all", value: "select all"
        }
    ]))

Answer 1

您正在为项目中的每个选项添加“全选”选项。以下代码声明一个数组，添加Select All选项，然后在projects中附加映射的对象。

const projectOptions = [
    {
        text: "Select all", value: "select all"
    },
    ...this.props.projects.map(project => ({
        text: project.name,
        value: project.id.toString(),
        key: project.id
    }))
]

Answer 2

您有正确的想法，您需要将“全选”选项附加到projectOptions数组。它只需要在map之外发生。这是一种方式：

const projectOptions = [
    ...this.props.projects.map(project => ({
        text: project.name,
        value: project.id.toString(),
        key: project.id
    })),
    { text: "Select all", value: "select all" }
];

select all的选项可从所有其他选项中获取所有值

2 个答案: