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

问题描述

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

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.

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

标签： reactjstypescriptenums

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

setFilter(value as Category);

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

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

问题描述

解决方案

推荐阅读