如何从表单字段字符串中设置枚举值

Question

我正在处理一个字段，该字段的值应该与枚举中的值相匹配。但是，当我试图将字段值设置为state时，TypeScript会抱怨，因为字段值(字符串(和枚举之间不兼容。

下面是我尝试做的一个例子：

import * as React from "react";
enum ValidValues {
foo = "foo",
bar = "bar"
}
export default function App() {
const [fieldValue, setFieldValue] = React.useState(ValidValues.foo);
return (
<input
value={fieldValue}
onChange={(e) => setFieldValue(e.currentTarget.value)}
/>
);
}

我理解为什么我会出现Argument of type 'string' is not assignable to parameter of type 'SetStateAction<ValidValues>'错误，但如果可能的话，我不确定如何使这些兼容。

Answer 1

使用枚举时，应该使用下拉菜单或复选框。然后，更改值以匹配枚举。

<select onChange={e => 
setFieldValue(ValidValues[e.target.value as keyof 
typeof ValidValues])}>
<option value={ValidValues.foo}>{ValidValues.foo} 
<option/>
<option value={ValidValues.bar}>{ValidValues.bar} 
<option/>
</select>

Answer 2

如果您明确设置useState 的类型，我认为您应该没事

const [fieldValue, setFieldValue] = React.useState<string>(ValidValues.foo);