Question

单击glyphicon时，React onClick事件无效。

const SortableItem = SortableElement(({value, parentId}) =>
    <ListGroupItem bsStyle='success' style={{width:'300px',textAlign:'left'}}>
        {value}
        {parentId === null && <span className='glyphicon glyphicon-remove' style={{float:'right',width:'10px',height:'10px'}} 
        onClick={e => {e.preventDefault(); console.log('yes')}}/>}
    </ListGroupItem>
);

Answer 1

我遇到了类似的情况。我的 onClick 元素上的 <a> 事件在用户点击时没有被触发。

这就是我做错的地方，也许你犯了和我一样的错误。没有更多上下文，就不可能诊断出您的实际问题是什么。

（代码基本上是说，当我点击背景时，停止点击传播）

// Example of what I was doing WRONG

const Dialog = ({ onClose, children }) => {
    const $overlay = React.useRef(null)

    // on mount
    React.useEffect(() => {

        const handleBackgroundClick = (e) => {
            e.stopPropagation() // <<-- This was the line causing the issue
            onClose()
        })

        $overlay.current?.addEventListener('click', handleBackgroundClick)

        // on unmount
        return () => {
          $overlay.current?.removeEventListener('click', handleBackgroundClick)
        }
    }, [])

    return (
      <div className="Dialog" ref={$overlay}>{children}</div>
    )
}

基本上我要说的是：

不要在 React 中直接在 DOM 元素上使用 event.stopPropagation()

事件需要能够一直冒泡到顶层，否则内置的 React 事件将停止工作。

我最终通过在对话框中添加一个额外的 div 作为覆盖来解决这个问题。

// How I fixed the issue

const Dialog = ({ onClose, children }) => {
    return (
      <div className="Dialog">
          <div className="Dialog__overlay" onClick={()=> onClose()}></div>
          <div className="Dialog__content">{children}</div>
      </div>
    )
}

注意：这些是简单的例子来证明一个观点。使用的确切代码更复杂。使用此处显示的代码会导致您的网站出现可访问性问题。

单击

1 个答案: