Material-ui: Avertissement: Propriété de gestionnaire d'événement inconnu `onKeyboardFocus`. Il sera ignoré

Question

trace plus détaillée:

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) 

J'ai un IconMenu avec un accessoire de IconButtonElement. Pour une raison quelconque, il continue à lancer cet avertissement. Pourquoi? Qu'Est-ce que c'est?

Exemple de code qui déclenche est:

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

Il est un exemple assez simple presque copier-collé de la documentation avec quelques fonctions aux menuitems, mais rien qui devrait jeter une erreur comme celle-ci. Même quand j'ai fait un exemple complet de barebone - il lance toujours l'avertissement. Il est un peu moche d'avoir dans la console à chaque fois que la page se charge de

Answer 1

IconMenu passe le onKeyboardFocus prop à l'élément défini dans iconButtonElement, qui serait bien si elle était un élément React (comme IconButton, comme the docs suggèrent) , mais l'avertissement se produit parce que vous l'avez enveloppé dans un div et onKeyboardFocus n'est pas un événement DOM pris en charge (il s'agit d'une propriété de l'API IconButton).

Vous devez supprimer le div externe dans iconButtonElement.

onKeyboardFocus par défaut à une fonction non-op et est passé sans condition. Puisque vous ne le spécifiez pas comme un accessoire pour IconMenu, l'effet sera le même si vous supprimez la div de wrapping dans iconButtonElement: cela ne fera rien, mais l'avertissement ne se produira plus.

Si vous utilisiez le pilier onKeyboardFocus, supprimer le div ou le remplacer par un autre composant qui transmet ce pilier à son enfant serait le seul moyen de s'assurer qu'il parvient à IconButton.

Je ne soumettraient pas un problème, car deux ont déjà été soumis et fermé:

• #6056
• #5071