时间戳

首页 > 解决方案 > event.target.value 句柄为 ENUM

reactjs - event.target.value 句柄为 ENUM

问题描述

event.target.value 返回一个“字符串”值，我希望将其识别为 ENUM 类型。我有以下代码：

export enum Permissions {
    OnlyMe,
    Everyone,
    SelectedPerson
}
...

<FormControl>
<InputLabel>Label name</InputLabel>
<NativeSelect
    value={state.user.permission}
    onChange={(event) =>
        setState({
        ...state,
        user: {
            ...state.user,
            permission: event.target.value as Permissions
        }
    })}
>
    <option value={Permissions.OnlyMe}>Only me</option>
    <option value={Permissions.Everyone}>Everyone</option>
    <option value={Permissions.SelectedPerson}>Selected persons</option>
</NativeSelect>

我收到打字稿错误“将类型'字符串'转换为权限可能是一个错误，因为两种类型都没有与另一种充分重叠。”

我已经尝试过：

permission: Permissions(event.target.value) or

permission: Permissions(String(event.target.value))

但没有任何工作。谢谢

标签： reactjstypescriptenumsmaterial-ui

解决方案

TypeScript 会将枚举作为 Number 处理，例如：

  • 0 只代表我
  • 1 适合所有人
  • 2 代表选定人员

event.target.value将返回一个字符串，所以您的问题是您正在尝试将字符串转换为整数，您可以简单地这样做+event.target.value，通过使用 js hack 转换字符串值来解决您的编译错误+。

注意：上面的解决方案将返回一个数字，如果您希望将其作为字符串获取，您可以这样做Permissions[+event.target.value]

推荐阅读