Material-ui：警告：未知的事件处理程序属性“onKeyboardFocus”。会被忽略答案

【问题标题】：Material-ui: Warning: Unknown event handler property `onKeyboardFocus`. It will be ignoredMaterial-ui：警告：未知的事件处理程序属性“onKeyboardFocus”。会被忽略
【发布时间】：2018-04-01 10:56:16
【问题描述】：

更详细的跟踪：

warning.js:33 Warning: Unknown event handler property `onKeyboardFocus`. It will be ignored.
    in div (created by IconMenu)
    in div (created by IconMenu)
    in IconMenu (created by DropdownMenu)
    in div (created by DropdownMenu)

我有一个带有 IconButtonElement 道具的 IconMenu。出于某种原因，它不断发出此警告。为什么？这是什么？

触发的示例代码是：

<IconMenu
    iconButtonElement={
        <div>
            <IconButton onClick={this.handleTouchTap}>
                <div >
                    <img src={require("../../settingsicon.svg")}/>
                </div>
            </IconButton>
        </div>}
    open={this.state.open}
    anchorOrigin={{horizontal: "right", vertical: "bottom"}}
    targetOrigin={{horizontal: "right", vertical: "top"}}
>
    <MenuItem
        className={someClass}
        onClick={this.handleLogOutClick}
    >
        <span className={someClass}Hello</span>
    </MenuItem>
    <Divider className={someClass}/>
    <MenuItem className={someClass}>
        <span className={someClass}>Goodbye</span>
    </MenuItem>
</IconMenu>

这是一个非常简单的示例，几乎是从文档中复制粘贴到菜单项中的一些函数，但不会引发这样的错误。即使我做了一个完整的准系统示例 - 它仍然会引发警告。每次页面加载时都在控制台中有点难看:)

【问题讨论】：

这不是您可以解决的问题，而是库将错误的道具传递给底层 dom 元素的问题。因此，您可以在 github 存储库上创建问题，也可以接受这些可怕的红色字母。顺便说一句，这些不是有害的警告。

标签： reactjs typescript material-ui

【解决方案1】：

IconMenu 将 onKeyboardFocus 属性传递给 iconButtonElement 中定义的元素，如果它是一个 React 组件（如 IconButton，正如 the docs 建议的那样），那就没问题了，但是会出现警告，因为你已经包装了它在 div 中，并且 onKeyboardFocus 不是受支持的 DOM 事件（它是 IconButton API 中的属性）。

您应该删除iconButtonElement 中的外部 div。

onKeyboardFocus 默认为无操作函数并无条件传递。由于您没有将其指定为 IconMenu 的道具，因此如果您删除 iconButtonElement 中的包装 div，效果将相同：它什么也不做，但将不再出现警告。

如果您使用的是 onKeyboardFocus 属性，则删除 div 或将其替换为另一个将此属性传递给其子组件的组件将是确保它到达 IconButton 的唯一方法。

我不会提交问题，因为已经提交并关闭了一对：

#6056
#5071

【讨论】：