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的问题吗？

Safari未触发React onClose eventListener

0 个答案: