Question

我正在使用实质性的UI背景，并且希望在其中包含一些微小的形式。但是，每当我单击其子级时，由于onClick可以切换背景而关闭了背景。

有什么方法可以阻止背景onClick从背景内部触发（是儿童）吗？

我尝试对内部元素使用useRef，但对我来说，在元素上具有多个引用并在切换功能中检查它们是否应该隐藏背景似乎很疯狂。我也无法访问背景幕内的某些元素；

const handleBackdropToggle = e => {
  console.log(e.currentTarget === backdropRef.current);
  if (e.currentTarget === backdropRef.current) {
    setOpen(!open);
  }
};

const handleToggle = e => {
  setOpen(!open);
};

<Backdrop
  className={classes.backdrop}
  open={open}
  onClick={handleBackdropToggle}
  ref={backdropRef}
>
  <div className={classes.form}>
    <CommonFormCard
      noBorder={true}
      onSubmit={onSubmit}
      onBack={handleToggle}
      submitButtonText={`Odeslat`}
    >
      <>
        <h4>Od kdy má fotograf nafotit nemovitost?</h4>
        <CommonForm formData={renderFormData} onChange={onChange} />
      </>
    </CommonFormCard>
  </div>
</Backdrop>;

Answer 1

您可以使用Click away listener。而不是通过背景上的onClick来切换背景。

您可能遇到的主要问题是您需要停止在表单中传播单击事件。 DOM事件的本质是默认情况下会传播到所有祖先。您可以通过以下方式防止出现这种情况：

<div className={classes.form} onClick={e => e.stopPropagation()}>

材质用户界面-背景触发其子级的onClick

1 个答案: