Typescript 中的材质 UI 选择

Question

我使用 Material UI select 创建了一个下拉菜单。它说“搜索依据”。当我们点击它时，它会给我们一个列表。当我选择其中一个选项时，我想存储该选项并将“搜索依据”更改为所选选项。

export default function UserSearchPage(){
  const [criteria, setCriteria] = useState('');
  const [searchItem, setSearchItem] = useState('');
  return (
    <div>
      <div className='main-content'>
        <Select 
          value = {criteria}
          onChange={
            value => { setCriteria(value);}
          }
          displayEmpty
        >
          <MenuItem disabled value="">
            <em>Search By</em>
          </MenuItem>
          <MenuItem value={1}>First Name</MenuItem>
          <MenuItem value={2}>Last Name</MenuItem>
          <MenuItem value={3}>Phone Number</MenuItem>
          <MenuItem value={4}>Email</MenuItem>
        </Select>
      </div>
    )
    </div>
  );
}

目前，onChange 给我这个值错误：

Argument of type 'ChangeEvent<{ name?: string | undefined; value: unknown; }>' is not assignable to parameter of type 'SetStateAction<string>'.
  Type 'ChangeEvent<{ name?: string | undefined; value: unknown; }>' is not assignable to type '(prevState: string) => string'.

如果我使用这个：

onChange={event => setCriteria(event.target.value)}

我明白了：

Argument of type 'unknown' is not assignable to parameter of type 'SetStateAction<string>'.
  Type 'unknown' is not assignable to type '(prevState: string) => string'.

Answer 1

您必须在使用 unknown 类型值之前对其进行断言。如果您确定来自 onChange 事件的值将始终是字符串，那么您可以执行 onChange={event => setCriteria(event.target.value as string)} 并且编译器应该不再抱怨。

Answer 2

为您的事件参数定义一个类型。所以会是

onChange={event:React.ChangeEvent<{ value: unknown }> => setCriteria(event.target.value)}