javascript - MUI - 单击复选框标签中的链接

Question

我想制作一个“使用条款”复选框，并且我正在使用 FormControlLabel 为其嵌套一个复选框，但我需要创建一个链接，单击该链接会打开一个对话框组件，这是呈现条款，但是当我点击链接“”时，它也会选中复选框，因为它在标签内。

尝试制作一个看起来不错的结构非常困难，因此如果也可以在标签内呈现链接将是有益的。

代码如下:

<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&nbsp;
  <span className={localClasses.openDialogButton} onClick={() => handleOpenModal('authTerm')}>Ler</span>
      </p>
    }
  />
</FormGroup>

Answer 1

调用e.preventDefault()取消当前事件，使 Checkbox 状态不更新:

<FormControlLabel
  control={<Checkbox name="lgpd_agreement" />}
  label={
    <p>
      random text
      <Link
        onClick={(e) => {
          e.preventDefault();
          alert('link clicked!');
        }}
      >
        Your Link
      </Link>
    </p>
  }
/>