在 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

你可以做到

setFilter(value as Category);

Answer 2

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

setFilter(value as Category);

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

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

Using enum for event.target.value in Typescript and React

enums

typescript

reactjs