React IconMenu组件报错：Unknown event handler property `onKeyboardFocus` 求助

That warning pops up because a DOM element is receiving an event handler prop (onKeyboardFocus) that it doesn't recognize—usually this happens when a component (in your case, IconMenu or its children) incorrectly passes this non-standard prop down to a native HTML element. Let's break down how to fix this:

1. Identify the root cause #

It looks like you're using an older, deprecated version of Material UI's IconMenu component. This component was phased out in v1.x in favor of a more flexible IconButton + Menu combination, and the old implementation had API quirks that often caused this kind of prop mishap.

2. Refactor to use modern Material UI components #

The cleanest fix is to replace the deprecated IconMenu with the current supported components. Here's how to adjust your existing code:

import { IconButton, Menu, MenuItem } from '@mui/material'; // Use '@material-ui/core' if on v4
// Import your preferred icon or keep your custom class-based icon
import AddCircleIcon from '@mui/icons-material/AddCircle';

// Make sure your component has state to track the menu's open state
constructor(props) {
  super(props);
  this.state = { anchorEl: null };
}

// ...

<div className="uk-flex">
  <form className="uk-search uk-search-default" onSubmit={e => e.preventDefault()}>
    <span className="uk-search-icon-flip" uk-search-icon=""/>
    <input 
      defaultValue={searchText} 
      className="uk-search-input" 
      type="search" 
      onKeyUp={this.setSearchText} 
      placeholder="Поиск..."
    />
  </form>

  {/* Replace IconMenu with IconButton (trigger) + Menu (dropdown) */}
  <IconButton 
    style={{cursor: 'pointer'}} 
    onClick={(e) => this.setState({ anchorEl: e.currentTarget })}
  >
    {/* Keep your custom icon or use the Material UI one below */}
    <i className="life-bi-icon life-bi-icon-plus-circle-small"/>
    {/* <AddCircleIcon /> */}
  </IconButton>

  <Menu
    anchorEl={this.state.anchorEl}
    open={Boolean(this.state.anchorEl)}
    onClose={() => this.setState({ anchorEl: null })}
    anchorOrigin={{horizontal: 'right', vertical: 'top'}}
    targetOrigin={{horizontal: 'right', vertical: 'top'}}
  >
    <MenuItem 
      style={{fontSize: '12px', lineHeight: '30px', minHeight: '30px'}} 
      onClick={() => {
        this.showModalBimsCreateTab();
        this.setState({ anchorEl: null }); // Close menu after action
      }}
    >
      Добавить вкладку
    </MenuItem>
    <MenuItem 
      style={{fontSize: '12px', lineHeight: '30px', minHeight: '30px'}} 
      onClick={() => {
        this.showModalBimsCreateBookmarkGroup();
        this.setState({ anchorEl: null });
      }}
    >
      Добавить закладку
    </MenuItem>
    <MenuItem 
      style={{fontSize: '12px', lineHeight: '30px', minHeight: '30px'}} 
      onClick={() => {
        this.showModalBimsCreateBookmark();
        this.setState({ anchorEl: null });
      }}
    >
      Добавить ссылку
    </MenuItem>
    <MenuItem 
      style={{fontSize: '12px', lineHeight: '30px', minHeight: '30px'}}
      className={!isNull(this.state.activeTab) && (this.state.activeTab.name === 'Общее' || this.state.activeTab.name === 'Инструкции') ? "hidden" : null}
      onClick={() => {
        this.showModalBimsUpdate();
        this.setState({ anchorEl: null });
      }}
    >
      Редактировать
    </MenuItem>
  </Menu>
</div>

Key updates: #

• Replaced the single IconMenu with two separate components: IconButton (to trigger the dropdown) and Menu (the dropdown itself)
• Added state (anchorEl) to control when the menu opens/closes
• Updated MenuItem click handlers to close the menu after the action is triggered
• Removed the deprecated onChange prop (modern menus rely on individual MenuItem onClick handlers instead)

3. Quick fixes if you can't upgrade right now #

If replacing the component isn't feasible immediately:

• Double-check you're using the latest available version of the deprecated IconMenu package
• Search your codebase for any accidental references to onKeyboardFocus (it might be getting passed from a wrapper component)
• Wrap your iconButtonElement content in a div and use prop destructuring to filter out any unknown props before passing them to native DOM elements

内容的提问来源于stack exchange，提问作者stackerLoki