Estoy planeando hacer un show y ocultar usando el interruptor. Cuando enciendo el interruptor, debe mostrar el componente y cuando enciendo el interruptor, debe ocultar el componente.
Esta es la codificación que hice.
export const VirtualEventSection = ({ control, onSearch, onSearchInputChange, searchInputValue, }: VirtualEventSectionProps) => { const { formatMessage } = useLocale(); const styles = useStyles(); const [state, setState] = useState(false); const handleSwitchChange = (event: React.ChangeEvent<HTMLInputElement>) => { setState(event.target.checked); }; return ( <Card className={styles.actionCard}> <Grid container spacing={1} alignItems="flex-start"> <Grid item sm={12} xs={12}> <SwitchWithLabel name="virtualEnabled" label={formatMessage({ id: 'form_event.event_toggle_lable' })} control={control} checked={state} onChange={handleSwitchChange} /> {state && state === true ? ( <LocationSelection control={control} onSearch={onSearch} onSearchInputChange={onSearchInputChange} searchInputValue={searchInputValue} /> ) : ( <h1></h1> )} </Grid> </Grid> </Card> ); }; Pero cuando agrego así, aparece un error en onChange . este es el error que tengo
Type '(event: React.ChangeEvent<HTMLInputElement>) => void' is not assignable to type '({ name, checked }: OnChangeProps<"virtualEnabled">) => void'. Types of parameters 'event' and '__0' are incompatible.Type 'OnChangeProps<"virtualEnabled">' is missing the following properties from type 'ChangeEvent<HTMLInputElement>': target, nativeEvent, currentTarget, bubbles, and 11 more. Este es el componente switchWithLable creado
export const SwitchWithLabel = <T extends string = string>({ label, name, control, ...switchProps }: SwitchWithLabelProps<T>) => { const styles = useStyles(); return ( <Controller name={name} control={control} render={({ value, onChange }) => ( <FormControlLabel className={styles.label} label={label} control={ <Switch name={name} onChange={async ({ checked }) => { onChange(checked); }} checked={value} {...switchProps} /> } /> )} /> ); };¿Alguien puede ayudarme a lograr el objetivo? Intenté varias veces y todavía muestra el error.
No necesita tener un event: React.ChangeEvent<HTMLInputElement> . Puede cambiar el estado del interruptor con una función simple.
const handleSwitchChange = () => { setState(!state); };Código completo =>
export const VirtualEventSection = ({ control, onSearch, onSearchInputChange, searchInputValue, }: VirtualEventSectionProps) => { const { formatMessage } = useLocale(); const styles = useStyles(); const [state, setState] = useState(false); const handleSwitchChange = () => { setState(!state); }; return ( <Card className={styles.actionCard}> <Grid container spacing={1} alignItems="flex-start"> <Grid item sm={12} xs={12}> <SwitchWithLabel name="virtualEnabled" label={formatMessage({ id: 'form_event.event_toggle_lable' })} control={control} checked={state} onChange={() => handleSwitchChange()} /> {state && state === true ? ( <LocationSelection control={control} onSearch={onSearch} onSearchInputChange={onSearchInputChange} searchInputValue={searchInputValue} /> ) : ( <h1></h1> )} </Grid> </Grid> </Card> ); };