Typescript 中的材质 UI 选择

Posted 2023-02-22

【中文标题】Typescript 中的材质 UI 选择

【英文标题】：Material UI Select in Typescript

【发布时间】：2020-06-17 07:17:25

【问题描述】：

我使用 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'.

【参考方案1】：

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

【讨论】：

这可行，但我有点困惑。我在同一页面的搜索栏上使用它，它可以工作onChange=value => setSearchItem(value);那么为什么相同的模式对选择不起作用？

我假设您的意思是您的TextInput 的onChange。 TextInput 的 onChange 和 Select 的 onChange 的类型定义不一样。 Material UI 开发人员出于某些（我确信这是合理的）原因决定将value 类型设为unknown，因此您必须对此进行断言。

不，我的意思是 onChange() 用于 Material UI 的 SearchBar，但是解释是有道理的

@giotskhada 谢谢你的回答。你有什么建议可以在使用联合类型（例如字符串|数字）时实现这一点吗？

【参考方案2】：

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

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

【讨论】：

我在 onChange 上收到此错误：No overload matches this call. Overload 1 of 2, '(props: SelectProps, context?: any): ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | Component<...> | null', gave the following error.

Cannot find name 'value'.

也许您可以在将 .js 文件更改为 .tsx codesandbox.io/s/…

后尝试这里

如果您有严格的 lint 验证，这将失败。第一个答案是这样做的安全方法。