Lo que estoy tratando de hacer es obtener cuál es la clave del sider que está usando el usuario (sin ReactDOM y con componentes funcionales)
mi código de muestra aquí:
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> ); } Obs: I'm using ant design lib
Alguien sabe como hacer que funcione?
Intenté usar un evento const on click para establecer un estado de la tecla seleccionada, pero no funcionó
No hay onClick en Menu.Item
solo el componente de Menu tiene onClick o onSelect, ambos le devolverán la llamada de la tecla "pulsada", la diferencia es que onClick es para cualquier elemento de menú, haga clic (incluido el menú desplegable), mientras que en select es cuando selecciona un elemento de menú real.
Hay 2 formas de obtener la cadena de historial:
1: use la cadena de historial como clave de elemento de menú: el problema sería que no puede tener 2 elementos de menú que tengan la misma clave de historial
2 - tener un mapa que asigna la tecla de menú a la cadena de historial
vea la demostración a continuación: 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>Debe guardar la clave seleccionada como parte del estado del componente. Puede configurar la clave seleccionada actual como parte de onClick.
const selectedKey, setSelectedKey = useState("defaultSelectedKey")No estoy seguro de para qué sirve el enlace useHistory, pero si necesita configurar eso onClick así como la tecla seleccionada, muévalo todo a una función como esta
const handleSelectKey = function(key, history_string) { setSelectedKey(key) history.push(history_string) } ... onclick={() => handleSelectedKey("3", "/usuarios/novo")}https://ant.design/components/menu/
EDITAR
Con base en la investigación de su biblioteca de diseño, su selección al hacer clic y manejar debe estar en el nivel superior del componente de menú. Simplemente copie la sintaxis que usan en su código de ejemplo.