Estoy usando el componente desplegable de diseño de hormigas con una acción de clic derecho dentro.
Quiero poder incrementar en 5 o 10 a la vez. Pero siempre que se haga clic en esto, ignorará el del oyente onClick para el Menu.Item .
const App = () => { const [counter, setCounter] = useState(1); const menu = ( <Menu> <Menu.Item key="five" onClick={() => setCounter(counter + 5)}> by 5 </Menu.Item> <Menu.Item key="ten" onClick={() => setCounter(counter + 10)}> by 10 </Menu.Item> </Menu> ); return ( <div> <p>Counter: {counter}</p> <div onClick={() => setCounter(counter + 1)} style={STYLING}> <p>Click here to increment</p> <Dropdown overlay={menu} trigger={["contextMenu"]}> <span> Right click here for custom increment </span> </Dropdown> </div> </div> ); };Ejemplo de Codesandbox: https://codesandbox.io/s/contextmenu-with-dropdown-antd-n4c5i?file=/index.js
He tratado de jugar con ReactDOM.createPortal, pero no puedo entender cómo usarlo correctamente en un escenario como este.
Sé que probablemente no debería entrar en una solución createPortal, pero la razón por la que necesito esto no es por este ejemplo simple, pero quiero tener esta funcionalidad dentro del encabezado de la columna de la tabla de diseño de hormigas y al mismo tiempo tener soporte de clasificación.
Pensé que no necesito usar portales. En su lugar, puedo usar stopPropagation para evitar que cualquier nodo principal obtenga un evento onClick.
Dentro del evento Menu.Item onClick, el evento javascript estándar está disponible en un campo domEvent .
Entonces podemos crear una función como esta:
const menuOnClick = (amount) => (e) => { e.domEvent.stopPropagation(); setCounter(counter + amount); }; y actualice nuestro Menu.Item onClick devoluciones de llamada a este
<Menu.Item key="five" onClick={menuOnClick(5)}>Ejemplo de sandbox: https://codesandbox.io/s/contextmenu-with-dropdown-antd-solution-8029o?file=/index.js