Quiero hacer una casilla de verificación de "Términos de uso", y estoy usando FormControlLabel para anidar una Casilla de verificación, pero necesito hacer un enlace que cuando se hace clic abre un componente de Diálogo, que está representando los términos, pero cuando haga clic en el enlace "" también marca la casilla de verificación, ya que está dentro de la etiqueta.
Es bastante difícil hacer una estructura para que se vea bien, por lo que sería beneficioso si también fuera posible mostrar el enlace dentro de la etiqueta.
Aquí está el código:
<FormGroup row className={localClasses.greenCheckbox}> <FormControlLabel control={ <Checkbox checked={state.lgpd_agreement} onChange={lgpdAgreementOnChange} name="lgpd_agreement" /> } label={ <p> Autorizo a #### coletar e armazenar meus dados com a finalidade de fornecer os serviços do programa conforme o respectivo Termo <span className={localClasses.openDialogButton} onClick={() => handleOpenModal('authTerm')}>Ler</span> </p> } /> </FormGroup>Llame a e.preventDefault() para cancelar el evento actual para que el estado de la Checkbox de verificación no se actualice:
<FormControlLabel control={<Checkbox name="lgpd_agreement" />} label={ <p> random text <Link onClick={(e) => { e.preventDefault(); alert('link clicked!'); }} > Your Link </Link> </p> } />