如何让 Sider 选择的键响应？

Question

我想做的是获取用户正在使用的 sider 的密钥（没有 ReactDOM 和功能组件）

我的示例代码在这里：

  export default function DrawerSider() {
  const history = useHistory();
  const [selectedKey, setSelectedKey] = useState("sub1")

  const handleSelectKey = function(key, history_string) {
    setSelectedKey(key)
    history.push(history_string)
    console.log(key)
  }

  return (
    <Sider width={200} className="site-layout-background">
      <Menu 
        defaultSelectedKeys={selectedKey}    
        mode="inline"
        style={{ height: "100%", borderRight: 0 }}
      >
        <Menu.Item
          key="sub1"
          icon={<HomeOutlined />}
          onClick={() => handleSelectKey("sub1","/dashboard/resumo")}
        >
          Dashboard
        </Menu.Item>
        <SubMenu key="sub2" icon={<UserOutlined />} title="Usuários">
          <Menu.Item
            key="1"
            icon={<PlusCircleOutlined />}
            onClick={() => handleSelectKey("1","/usuarios/novo")}
          >
            Adicionar usúario
          </Menu.Item>
          <Menu.Item
            key="2"
            icon={<TableOutlined />}
            onClick={() => handleSelectKey("2","/usuarios/todos")}
          >
            Todos usúarios
          </Menu.Item>
        </SubMenu>
        <SubMenu key="sub3" icon={<FormOutlined />} title="Formulários">
          <Menu.Item
            key="3"
            icon={<PlusCircleOutlined />}
            onClick={() => handleSelectKey("3","/formularios/novo")}
          >
            Adicionar formulário
          </Menu.Item>            
          </SubMenu>
        </SubMenu>
      </Menu>
    </Sider>
  );
}

观察：I'm using ant design lib

有人知道如何让它工作吗？

我尝试使用 const on click 事件来设置所选键的状态，但没有成功

Answer 1

您需要将 selected 键保存为组件状态的一部分。您可以将当前 selected 键设置为 onClick 的一部分。

const selectedKey, setSelectedKey = useState("defaultSelectedKey")

不确定 useHistory 挂钩的用途，但如果您需要设置 onClick 以及 selectedKey，请将它们全部移动到一个函数中，例如

const handleSelectKey = function(key, history_string) {
  setSelectedKey(key)
  history.push(history_string)
}

...

onclick={() => handleSelectedKey("3", "/usuarios/novo")}

https://ant.design/components/menu/

编辑

根据对您的设计库的研究，您的 onclick 和 handle select 必须位于菜单组件的顶层。只需复制他们在示例代码中使用的语法即可。

https://ant.design/components/menu/

Answer 2

Menu.Item

上没有 onClick

只有 Menu 组件有 onClick 或 onSelect，两者都会给你“点击”键的回调，不同之处在于 onClick 是针对任何菜单项的点击（包括展开菜单），而 on select 是当您 select 实际菜单项时。

获取历史字符串的方法有两种：

1 - 使用历史字符串作为 menuItem 键：问题是你不能有 2 个具有相同历史键的菜单项

2 - 有一个将菜单键映射到历史字符串的映射

看下面的演示： https://codesandbox.io/s/inline-menu-antd-4-18-2-forked-bgwyj?file=/index.js

      const handleOnSelect = ({ item, key, keyPath, selectedKeys, domEvent }) => {
        console.log(item);
        console.log(keyPath);
        console.log(selectedKeys);
        console.log(domEvent);
        handleSelectKey(key);
      };

...
..
<Menu
  onSelect={handleOnSelect}
...
>
...
</Menu>

如何让 Sider 选择的键响应？

How to make Sider selected key be responsive?

javascript

jsx

reactjs

antd