在material-ui和react中动态添加、删除、更改、禁用/启用菜单项

state = {
  menuItems: [
    { id: 1, label: '菜单项1', disabled: false },
    { id: 2, label: '菜单项2', disabled: true },
    { id: 3, label: '菜单项3', disabled: false },
  ],
};

render() {
  const { menuItems } = this.state;

  return (
    <Menu>
      {menuItems.map(item => (
        <MenuItem
          key={item.id}
          disabled={item.disabled}
        >
          {item.label}
        </MenuItem>
      ))}
    </Menu>
  );
}

handleAddMenuItem = () => {
  const { menuItems } = this.state;
  const newMenuItem = { id: 4, label: '菜单项4', disabled: false };

  this.setState({
    menuItems: [...menuItems, newMenuItem],
  });
}

handleDeleteMenuItem = () => {
  const { menuItems } = this.state;

  this.setState({
    menuItems: menuItems.filter(item => item.id !== 2),
  });
}

handleUpdateMenuItem = () => {
  const { menuItems } = this.state;

  this.setState({
    menuItems: menuItems.map(item => {
      if (item.id === 3) {
        return { ...item, label: '新菜单项3' };
      }
      return item;
    }),
  });
}

handleDisableMenuItem = () => {
  const { menuItems } = this.state;

  this.setState({
    menuItems: menuItems.map(item => {
      if (item.id === 1) {
        return { ...item, disabled: true };
      }
      return item;
    }),
  });
}