在 Typescript 和 React 中为 event.target.value 使用枚举

Question

我有一个枚举定义类别，可以通过表单单选输入选择：

enum Category {
  PRACTICAL = 'practical',
  POSITIONING = 'positioning',
}

如何在我的单选组 onChange 处理函数中使用这个枚举？这就是我目前正在做的事情：

const [filter, setFilter] = useState<Category>(Category.POSITIONING);

const handleFilterClick = (event: React.ChangeEvent<HTMLInputElement>) => {
  const { value } = event.target;
  setFilter(value); // <== Argument of type 'string' is not assignable to parameter of type 'SetStateAction<Category>'
};

setFilter(value) 不起作用，因为 typeof 值是 string 而不是 Category。

我应该如何处理这种情况？

Answer 1

Typescript 无法确定 event.target.value 将成为该枚举的成员。所以你需要使用类型断言来告诉 typescript 你知道这些是唯一可能的值：

setFilter(value as Category);

请注意，类型断言意味着您告诉 typescript 不要检查您的工作。如果你写的 JSX 实际上有办法在枚举之外设置一个值，那么 typescript 将无法告诉你这个。

Answer 2

你可以这样做

setFilter(value as Category);