reactjs - Material UI - 背景在其子项上触发 onClick

Question

我正在使用 Material UI 背景，并希望在其中包含一些微小的形式。但是每当我点击它的 child 时，背景就会关闭，这要归功于 onClick这应该切换背景。

有什么办法可以停止背景onClick从内部背景触发( child )？

我曾尝试使用 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

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

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

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