javascript - Material-UI formControlLabel 整个标签是可点击的，只有文本应该是

Question

我是新来的material UI。在这里我有以下form

<FormControl
  variant="outlined"
  className={css.formControl}
  margin="dense"
  key={"abc_" + index}
>
  <FormControlLabel
    control={
      <Checkbox
        onClick={handleClick(data)}
        checked={_.some(selected, { Id: selected.Id })}
        value={selected.Id}
        color="default"
      />
    }
    label={data?.Name ?? "NO_LABEL"}
  />
</FormControl>

现在，由于该区域有点长，因此整个标签都可以单击，因此，我正在尝试的是唯一的复选框，并且文本应该是可单击的，并且不应单击其他空白区域。在这里，我给出了

max-width for that label to be 272px.

我该如何添加？

谢谢。

标签： javascripthtmlreactjsmaterial-uireact-material

Answer 1

您可以防止父元素发生单击事件，也可以允许子元素执行此操作。

使用指针事件禁用点击事件。

pointer-events: none;

<FormControlLabel
  style={{ pointerEvents: "none" }}
  control={
    <Checkbox
      onClick={handleClick}
      style={{ pointerEvents: "auto" }}
      color="default"
    />
  }
  label={"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"}
/>