用于反应引导 DropDown 的 onSelect 事件处理程序打字稿类型

Posted 2023-03-13

【中文标题】用于反应引导 DropDown 的 onSelect 事件处理程序打字稿类型

【英文标题】：onSelect event handler typescript type for react bootstrap DropDown

【发布时间】：2021-01-12 05:24:43

【问题描述】：

我将 React 与 typescript 和 react-bootstrap 一起使用来创建下拉列表：

ipc__handleSelect = (eventKey: any, event: any) => 


render() 

    return (
        <Dropdown>
            <Dropdown.Toggle>Text</Dropdown.Toggle>
            <Dropdown.Menu>
                <Dropdown.Item
                    key         = 'key1'
                    eventKey    = 'key1'
                    onSelect    = this.ipc__handleSelect
                >Item</Dropdown.Item>
            </Dropdown.Menu>
        </Dropdown>
    );

帮助识别数据类型

event: any - 我应该写什么类型？

eventKey: any - 我应该写什么类型？

当我写eventKey: string（因为键是字符串）时，我得到错误：

Type '(eventKey: string, event: any) => void' 不可分配给 输入“选择回调”。参数类型“eventKey”和 'eventKey' 不兼容。 键入'字符串 | null' 不可分配给类型 'string'。 类型 'null' 不能分配给类型 'string'。

为什么null会出现在那里？

【参考方案1】：

如果您查看 react-bootstrap 库代码，您将看到下拉菜单。 Item 有一个 SelectCallback 类型的 onSelect，SelectCallback 是这样的：

export type SelectCallback = (
  eventKey: string | null,
  e: React.SyntheticEvent<unknown>,
) => void;

由于您指定您的处理程序只接受字符串类型，并且下拉项 onSelect 将字符串 | null 提供给 eventKey，因此您收到无法映射的错误。

【讨论】：

如果我写eventKey: string | null，则显示错误Type 'string | null' is not assignable to type 'string | undefined'，如果写event: React.SyntheticEvent<unknown> - 错误：Property 'className' does not exist on type 'EventTarget'. 在event.target.className 中使用event.target.className 时@

我没有得到第一个错误，它说Type 'string | null' is not assignable to type 'string | undefined'，当我尝试它时，你使用的是什么版本的 react-bootstrap 和 typescript？对于第二个，由于 event.target 的类型是 EventTarget，为了获得 html 属性，你必须像这样将它转换为 HTMLElement (event.target as HTMLElement).className