Material-ui:警告:未知的事件处理程序属性`onKeyboardFocus`。它会被忽略

时间:2017-10-20 09:32:22

标签: reactjs typescript material-ui

更详细的追踪:

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>

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

1 个答案:

答案 0 :(得分:5)

IconMenu将onKeyboardFocus道具传递给iconButtonElement中定义的元素,如果它是一个React组件(如IconButton,如the docs建议的那样)会很好,但会发出警告因为你把它包装在一个div中,onKeyboardFocus不是受支持的DOM事件(它是IconButton API中的一个属性)。

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

onKeyboardFocus默认为无操作函数,无条件传递。由于你没有将它指定为IconMenu的道具,如果你在iconButtonElement中移除包装div,效果将是相同的:它什么也不做,但警告将不再发生。

如果您使用onKeyboardFocus道具,删除div或将其替换为将此道具传递给其子项的其他组件将是确保它到达IconButton的唯一方法。

我不会提交问题,因为已经提交并关闭了一对夫妇: