reactjs - 如何从表单字段字符串设置枚举值？

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>