在 SELECT 中为选项 TAG 动态使用 ENUMS (REACTJS)

Question

我有下面列出的 ENUMS

export declare enum UserStatus {
    NEW = "NEW",
    REGISTERED = "REGISTERED"
}

如何确保我可以使用这种动态方式作为 select 标签的下拉项。我在几个网站上在线搜索，但没有找到合适的答案。有人可以帮忙吗

目前我正在用这种方式进行硬编码。

<select value={selectedUserStatus} onChange={onUserStatusSelect}>
      <option
        aria-selected="true"
        key={UserStatus.NEW}
        value={UserStatus.NEW}
      >
        {UserStatus.NEW}
      </option>
      <option
        aria-selected="true"
        key={UserStatus.REGISTERED}
        value={UserStatus.REGISTERED}
      >
        {UserStatus.REGISTERED}
      </option>
    </select>

Answer 1

如果它是 JSX 语法，您应该能够用 JSX 元素数组替换元素内部的标记，如下所示：

<select value={selectedUserStatus} onChange={onUserStatusSelect}>
    Object.keys(UserStatus).map(key => (
        <option
            aria-selected="true"
            key={UserStatus[key]}
            value={UserStatus[key]}
        >
            {UserStatus[key]}
        </option>
        )
    )
</select>

Answer 2

您还可以使用：

<select value={selectedUserStatus} onChange={onUserStatusSelect}>
    Object.values(UserStatus).map(value =>
        <option
            aria-selected="true"
            key={value]}
            value={value}
        >
            {value}
        </option>
    )
</select>

在 SELECT 中为选项 TAG 动态使用 ENUMS (REACTJS)

Use ENUMS dynamically for option TAG in SELECT (REACTJS)

javascript

arrays

json

html-select

reactjs