javascript - React onClose eventListener 未在 Safari 上触发

Question

我尝试使用react-dialog-polyfill，但是当我测试我的代码时，我知道 onClose 事件侦听器没有在 Safari 上触发，即使它在 Chrome 上工作。下面是 react-dialog-polyfill 中的代码。

import dialogPolyfill from 'dialog-polyfill';
const ModalBase = forwardRef((p, modal) => {
  const {
    children,
    open,
    ready,
    onCancel,
    onClose,
    useAsModal,
    ...rest
  } = p
  useEffect(() => {
    const self = modal.current

    dialogPolyfill.registerDialog(self)
    if (!self || !ready || self.open === open) return
    const show = useAsModal ? () => self.showModal() : () => self.show()
    const close = () => self.close()
    const action = open ? show : close
    action()
  }, [ready, open, modal, useAsModal])
  const onCancelWrap = e => {
    e.preventDefault()
    onCancel(e, modal.current)
  }
  const onCloseWrap = e => {
    onClose(e, modal.current)
  }
  return (
    <dialog {...rest}
     ref={modal}
     onCancel={onCancelWrap}
     onClose={onCloseWrap}
    >
      {children}
    </dialog>
  )
})

然后我发现当我注释掉下面的 onCancel 和 onClose 部分时：

return (
    <dialog {...rest}
     ref={modal}
     //onCancel={onCancelWrap}
     //onClose={onCloseWrap}
    >
      {children}
    </dialog>
  )

并添加原生事件监听器，

useEffect(() => {
    const self = modal.current
    dialogPolyfill.registerDialog(self);
    self.onclose=e => {
      onClose(e, self)
    }
    self.oncancel=e => {
      e.preventDefault()
      onCancel(e, self)
    }

有效。

我认为这是反应不调用 onClose 的问题<dialog onClose={onClose} />

这是 React 的问题吗？

标签： javascriptreactjs