React Typescript：Ant Design Table with Dropdown Column pass Record to function

Question

正在关注 Column：

{ title: "Action", render: (record: ToDoClass) => { //<- this record
   return (
      <Dropdown overlay={menu}>
         <Button>
            User <DownOutlined />
         </Button>
      </Dropdown>
   )
}},

有 menu:

const menu = (
   <Menu onClick={updateUser}>
      <Menu.Item key="0" />
      <Menu.Item key="1">User 1</Menu.Item>
      <Menu.Item key="2">User 2</Menu.Item>
   </Menu>
);

必须使用来自 columns 的参数 record 和来自 menu 的 key 调用 function: updateUser:

const updateUser = ({ key }: { key: React.Key }): void => { //<- need record here
   console.log(key);
};

Answer 1

基于 documentation，onClick 道具接受一个接受对象 { item, key, keyPath, domEvent } 的函数。您可以尝试将 _updateUser 和 menu 更改为如下内容：

<Menu onClick={this._updateUser}>
...
private _updateUser = ({ item, key }: { item: ToDoClass, key: any }): void => {
   console.log(item, key);
}

这是我根据您的代码创建的an example。请注意 onClick 分配方式的差异。另外，由于 item 是循环的，打印时会导致浏览器崩溃。

React Typescript：Ant Design Table with Dropdown Column pass Record to function

React Typescript: Ant Design Table with Dropdown Column pass Record to function

javascript

typescript

reactjs

antd