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

Question

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

/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")
);

如何正确地将它分配给我的文字类型？我应该使用枚举吗？我应该检查什么资源（typescript-react github 页面）？

非常感谢

编辑：感谢您更正错别字，但仍有一处错误

Answer 1

All Task 未在您的界面上定义，而 All task 已定义。

Answer 2

你应该像这样输入 cast。

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

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

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

Problem assigning state of useState to literal types (HTMLSelectElement)

jsx

typescript

reactjs

tsx

react-hooks