Material-Ui: Warnung: Unbekannte Event-Handler-Eigenschaft `onKeyboardFocus`. Es wird

Question

Detailliertere Spur ignoriert werden:

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) 

Ich habe eine IconMenu mit einem IconButtonElement prop. Aus irgendeinem Grund wirft es immer wieder diese Warnung auf. Warum? Was ist es?

Beispielcode, den auslöst, ist:

<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> 

Es ist ein ziemlich einfaches Beispiel fast kopieren kleisterte aus der Dokumentation mit wenigen Funktionen zu der menuitems, aber nichts, was einen Fehler wie diese werfen soll. Auch wenn ich ein komplettes Barebone-Beispiel gemacht habe - es gibt immer noch die Warnung aus. Es ist ein bisschen hässlich in der Konsole die in iconButtonElement definiert

Answer 1

IconMenu gibt die onKeyboardFocus prop auf das Element :) Seite geladen wird jedes Mal haben, was in Ordnung wäre, wenn es sich um eine Komponente Reagieren waren (wie IconButton, wie the docs vorschlagen) , aber die Warnung tritt auf, weil Sie sie in ein Div eingepackt haben und onKeyboardFocus kein unterstütztes DOM-Ereignis ist (dies ist eine Eigenschaft in der API IconButton).

Sie sollten die äußere div in iconButtonElement entfernen.

onKeyboardFocus ist standardmäßig eine No-Op-Funktion und wird unbedingt übergeben. Da Sie es nicht als eine Stütze für IconMenu angeben, wird der Effekt gleich sein, wenn Sie das Wrapping-Div in iconButtonElement entfernen: Es wird nichts tun, aber die Warnung wird nicht mehr auftreten.

Wenn Sie die onKeyboardFocus Prop verwenden, wäre das Entfernen des Div oder das Ersetzen durch eine andere Komponente, die diese Prop zu seinem Child übergeben, die einzigen Möglichkeiten, um sicherzustellen, dass es zu IconButton gelangt.

Ich würde ein Problem nicht vorlegen, da ein paar bereits eingereicht wurde und geschlossen:

• #6056
• #5071