将useState的状态分配给文字类型HTMLSelectElement时出现问题

问题描述

我正在使用打字稿和React挂钩构建待办事项应用程序，并且尝试添加过滤器功能以显示“所有任务”，“完成”或“要做”的任务。我尝试在此处使用文字类型，但这给了我错误。

/components/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;

我认为选项值应仅给出“所有任务” /“完成” /“待办事项”

然后将其呈现在我的Topbar.tsx中：

/components/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;

然后这是我的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")
);

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

非常感谢您

编辑：感谢您修正错误，但仍然存在一个错误

解决方法

您应该像这样键入cast。

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

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

,

“所有任务”未在界面上定义。