select all 的一个选项，它从所有其他选项中获取所有值

Question

我目前正在使用 semantic 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 全部选项。以下代码声明一个数组，添加 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

您的想法是正确的，您需要将 "Select all" 选项附加到 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 的一个选项，它从所有其他选项中获取所有值

An option for select all that gets all values from all other options

typescript

reactjs

semantic-ui-react