React 无法触发 onClick

Question

文章上的所有事件：onMouseMove、onMouseDown 等都已正确执行。但是 onClick 没有。我可以看到按钮，但点击它没有任何反应。

Button showed

const onDelete = () => {
  console.log('delete')
};

return (
  <>
    {show &&
      <Ul style={{top: pos.y, left: pos.x}}>
        <Li>
          <Button onClick={onDelete}>
            <Trash /> Delete
          </Button>
        </Li>
      </Ul>
    }
    <Article ref={ref} onContextMenu={onRightClick}
      onMouseMove={onMouseMove} onMouseDown={onMouseDown} onMouseUp={onMouseUp} onMouseLeave={onMouseLeave}
    >
      {children}
    </Article>
  </>
);

如果我将括号中的代码移到 Article 中，则会触发 onClick，但 Ul 的样式无法正常工作。我还有其他正确执行事件的组件在括号内。但由于某种原因，该组件仅执行文章.

中的事件

Answer 1

试试这个：

 onClick={() => onDelete()}

Answer 2

我找到了答案。当我在按钮外单击时（使用 ref），我有另一个功能可以关闭该按钮。但是当我点击按钮时，该功能被触发，因为我使用的是相同的参考。我只需要使用另一个 ref 就可以了！！！

useClickOutside(ref2, () => setShow(false));

const onDelete = () => {
  console.log("delete");
};

return (
  <>
    {show &&
      <Ul style={{top: pos.y, left: pos.x}}>
        <Li>
          <Button ref={ref2} onClick={onDelete}>
            <Trash /> Delete
          </Button>
        </Li>
      </Ul>
    }
    <Article ref={ref} onContextMenu={onRightClick}
      onMouseMove={onMouseMove} onMouseDown={onMouseDown} onMouseUp={onMouseUp} onMouseLeave={onMouseLeave}
    >
      {children}
    </Article>
  </>
);

React 无法触发 onClick

React can't fire onClick

javascript

onclick

reactjs