Estoy tratando de implementar un enlace personalizado de selección (que se definirá) para usar componentes como; entradas de texto, botones de opción, etc.
por ejemplo: Tiene una selección en un formulario. Digamos selección de género, que tendría 3 opciones; macho, hembra, no prefiero decir. Para esto acabo de escribir algo como esto.
import {useCallback, useState} from 'react'; export const useTripleSelection = () => { const [value, setValue] = useState(0); const toggleZero = useCallback(() => { setValue(0); }, []); const toggleOne = useCallback(() => { setValue(1); }, []); const toggleTwo = useCallback(() => { setValue(2); }, []); return [value, toggleZero, toggleOne, toggleTwo]; };Pero el problema es que necesitaré algo más para el desarrollo futuro, no quiero tener que escribir ganchos de selección dobles, triples o cuádruples.
¿Hay alguna manera de implementar un gancho de selección N de acuerdo con esta relación? Me puede ayudar ? Gracias.
No estoy seguro de que lo que está tratando de lograr sea una mejor práctica. Probablemente estaría mejor con un estado con una enumeración, como:
export enum TGenderValues { male = 'male', female = 'female', notSelected = 'not_selected', }De todos modos, podrías lograr lo que quieras con
import { useCallback, useState } from 'react'; export const useGetNthSelection = () => { const [value, setValue] = useState<number>(0); const togglerForNthSelection = useCallback((selectionNumber: number) => { return () => { setValue(selectionNumber); }; }, []); return [value, togglerForNthSelection]; }; const YourComponent = () => { const [value, togglerForNthSelection] = useGetNthSelection(); return ( <YourInput onSelectA={togglerForNthSelection(1)} onSelectK={togglerForNthSelection(10)} /> ); }