Reactjs 将useState的状态分配给文本类型（HTMLSelectElement）时出现问题

我正在用typescript和react钩子构建一个todo应用程序，并尝试添加一个过滤器功能来显示“所有任务”、“完成”或“待完成”的任务。我试图在这里使用文字类型，但它给了我错误

/组件/Sort.tsx：

import * as React from 'react';

interface SortProps {
    SelectByDone: (event: React.ChangeEvent<HTMLSelectElement>)=> void;
    SelectSortMethod: (event: React.ChangeEvent<HTMLSelectElement>)=> void;
}

const Sort: React.FunctionComponent<SortProps> = ({SelectByDone, SelectSortMethod}) => {
    return (
            <>
            <label >Sort by:</label>
            **<select   onChange={SelectByDone}>
                <option value="All Task">All Task</option>
                <option value="Done">Done</option>
                <option value="To Do">To Do</option>
            </select>**
            <select onChange={SelectSortMethod}>
                <option value="Date Added">Date Added</option>
                <option value="Due">Due</option>
                <option value="Caption">Caption</option>
            </select>
            </>
        );
};

export default Sort;

import*as React from'React'；
接口排序程序{
SelectByDone：（事件：React.ChangeEvent）=>void；
SelectSortMethod：（事件：React.ChangeEvent）=>void；
}
常量排序：React.FunctionComponent=（{SelectByDone，SelectSortMethod}）=>{
返回(
排序方式：
**
所有任务
多恩
做
**
添加日期
应得的
说明文字
);
};
导出默认排序；

我认为选项值应该只给出“所有任务”/“完成”/“待完成”

然后将在my Topbar.tsx中呈现：

import * as React from 'react';
import Sort from './Sort';
import SearchBar from './SearchBar';

interface TopBarProps {
    SelectByDone: (event: React.ChangeEvent<HTMLSelectElement>)=> void;
    SelectSortMethod: (event: React.ChangeEvent<HTMLSelectElement>)=> void;
    onSearchChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

const TopBar: React.FunctionComponent<TopBarProps> = ({SelectByDone,SelectSortMethod,onSearchChange}) => {
    return (
            <>
                <Sort SelectByDone={SelectByDone} SelectSortMethod={SelectSortMethod} />
                <SearchBar onSearchChange={onSearchChange} />
            </>
        );
};

export default TopBar;

/组件/Topbar.tsx：

import * as React from 'react';
import Sort from './Sort';
import SearchBar from './SearchBar';

interface TopBarProps {
    SelectByDone: (event: React.ChangeEvent<HTMLSelectElement>)=> void;
    SelectSortMethod: (event: React.ChangeEvent<HTMLSelectElement>)=> void;
    onSearchChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

const TopBar: React.FunctionComponent<TopBarProps> = ({SelectByDone,SelectSortMethod,onSearchChange}) => {
    return (
            <>
                <Sort SelectByDone={SelectByDone} SelectSortMethod={SelectSortMethod} />
                <SearchBar onSearchChange={onSearchChange} />
            </>
        );
};

export default TopBar;

import*as React from'React'；
从“./Sort”导入排序；
从“./SearchBar”导入搜索栏；
接口TopBarProps{
SelectByDone：（事件：React.ChangeEvent）=>void；
SelectSortMethod：（事件：React.ChangeEvent）=>void；
onSearchChange：（事件：React.ChangeEvent）=>void；
}
const TopBar:React.FunctionComponent=（{SelectByDone，SelectSortMethod，onSearchChange}）=>{
返回(
);
};
导出默认顶栏；

这是我的index.tsx：

import React, {useState} from "react";
import ReactDOM from "react-dom";
import TopBar from '../components/TopBar';
import TodosTable from '../components/TodosTable';

type DoneState = 'All Task' | 'Done' | 'To Do';

//...

const App = () => { 

    const [doneState, setDoneState] = useState<DoneState>('All Task')

    const [searchText, setSearchText] = useState<string>('')

    const selectByDone = (option: React.FormEvent<HTMLSelectElement>) => {
        setDoneState(option.currentTarget.value);
    }
    // 'option.currentTarget.value' is underlined and gives error: 
    // Argument of type 'string' is not assignable to parameter of type 'SetStateAction<DoneState>'.
    // (property) HTMLSelectElement.value: string
    // Sets or retrieves the value which is returned to the server when the form control is submitted.

    const onSearchChange = (event: React.FormEvent<HTMLInputElement>) => {
        setSearchText(event.currentTarget.value);
    }
    //This works however

    //...

    return (
          <>
              <TopBar SelectByDone={selectByDone} SelectSortMethod={selectSortMethod} onSearchChange={onSearchChange} />
              <TodosTable SelectByDoneState={doneState} SelectSortMethodState={sortMethodState} SearchText={searchText} TodosArray={todosArray} />
              {//<AddTodoModal/>
              }
          </>
      );
};

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

import React，{useState}来自“React”；
从“react dom”导入react dom；
从“../components/TopBar”导入TopBar；
从“../components/TodosTable”导入TodosTable；
键入DoneState='All Task'|'Done'|'To Do'；
//...
常量App=（）=>{
const[donstate，setdonstate]=useState（“所有任务”）
常量[searchText，setSearchText]=useState（“”）
const selectByDone=（选项：React.FormEvent）=>{
setDoneState（option.currentTarget.value）；
}
//“option.currentTarget.value”带下划线，并给出错误：
//“string”类型的参数不能分配给“SetStateAction”类型的参数。
//（属性）HTMLSelectElement.value:字符串
//设置或检索提交表单控件时返回给服务器的值。
const onSearchChange=（事件：React.FormEvent）=>{
setSearchText（event.currentTarget.value）；
}
//然而，这是可行的
//...
返回(
{//
}
);
};
ReactDOM.render(
,
document.getElementById（“根”）
);

如何正确地将其分配给我的文字类型？我应该使用枚举吗？我应该为此（typescript-github页面）签出什么资源

多谢各位

---

编辑：感谢您的排版修复，但是仍然有一个错误，

当所有任务都已定义时，您的界面上未定义所有任务。

您应该像这样键入cast

const selectByDone = (option: React.FormEvent<HTMLSelectElement>) => {
    setDoneState(option.currentTarget.value as DoneState);
}

const selectByDone=（选项：React.FormEvent）=>{
setDoneState（option.currentTarget.value作为DoneState）；
}

---

option.currentTarget.value是字符串类型，无法分配给DoneState。

所有任务

不是DoneState的一部分，但

所有任务

都是。