web-dev-qa-db-ja.com

Material-ui：警告：不明なイベントハンドラープロパティ `onKeyboardFocus`。無視されます

より詳細なトレース：

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>

これは、いくつかの関数を含むドキュメントからメニューアイテムにほとんどコピーペーストされた非常に単純な例ですが、このようなエラーをスローするものはありません。私が完全なベアボーンの例を作ったときでさえ、それはまだ警告を投げます。ページが読み込まれるたびにコンソールに表示するのは少し醜いです:)

reactjstypescriptmaterial-ui
6
cbll

IconMenuはonKeyboardFocusプロパティをiconButtonElementで定義された要素に渡します。これは、Reactコンポーネント（IconButtonのように docs Suggest）ですが、divでラップし、onKeyboardFocusがサポートされているDOMイベントではないため、警告が発生します（これは IconButton APIのプロパティです）。

iconButtonElementの外側のdivを削除する必要があります。

onKeyboardFocusのデフォルトは何もしない関数であり、無条件に渡されます。 IconMenuの小道具として指定していないので、アイコンボタン要素のラッピングdivを削除した場合と同じ効果が得られます。何もしませんが、警告は発生しなくなります。

onKeyboardFocusプロップを使用している場合、divを削除するか、このプロップを子に渡す別のコンポーネントに置き換えることが、IconButtonに確実に到達する唯一の方法です。

カップルはすでに提出され、閉鎖されているため、私は問題を提出しませんでした：

5
Ken Gregory