Reactjs 在React中的选择列表选项中使用TypeScript类型？

我正在尝试将TypeScript类型添加到以下代码中：

const [selectedDevice, setSelectedDevice] = useState<DesktopOrMobile>(DesktopOrMobile.desktop);

const handleChange = (event: React.ChangeEvent<{ value: DesktopOrMobile }>): void => {
  setSelectedDevice(event.target.value);
};

<select value={selectedDevice} onChange={handleChange}>
  <option value={DesktopOrMobile.desktop}>Desktop</option>
  <option value={DesktopOrMobile.mobile}>Mobile</option>
</select>

编辑

不能将类型分配给状态，在这种情况下，需要使用所需的键声明对象

假设

DesktopOrMobile

类型为：

键入DesktopOrMobile={
手机：字符串，
桌面：字符串
}

我认为最好的办法是将值的类型指定为DesktopOrMobile的

键，如下所示：

const DesktopOrMobileObj:DesktopOrMobile={
手机：“手机”，
桌面：“桌面”
};
type ValueType=DesktopOrMobile[keyof DesktopOrMobile]；
const[selectedDevice，setSelectedDevice]=useState（DesktopOrMobileObj.desktop）；
常量handleChange=（事件：React.ChangeEvent）：void=>{
setSelectedDevice（事件、目标、值）；
};
桌面
可移动的

此事件的值是字符串，因此必须为其分配字符串

顺便说一下，下次也要粘贴该类型。
这是错误：请在添加答案之前测试您的代码。对不起，伙计们，我在上面犯了一些错误！我刚刚修复了这个问题，并创建了一个codesandbox：看起来并没有办法在typescript中将枚举的值作为type获取。您可以这样使用：键入DesktopOrMobile='mobile'|'desktop'。或者，如果确保键和值相等，则使用。但这不是一个好办法。我建议使用
import * as React from "react";
import {useState} from 'react'

enum DesktopOrMobile  {
  mobile  = 'mobile',
  desktop =  'desktop'
}

export default function App() {
  const [selectedDevice, setSelectedDevice] = useState<DesktopOrMobile>(DesktopOrMobile.mobile);
  const handleChange = (value: DesktopOrMobile): void => {
    setSelectedDevice(value);
  };
  return (
      <div>
        <select value={selectedDevice} onChange={e => handleChange(e.target.value as DesktopOrMobile)}>
          <option value={DesktopOrMobile.desktop}>Desktop</option>
          <option value={DesktopOrMobile.mobile}>Mobile</option>
        </select>
      </div>
    );
}