React 按钮 onClick 引用 SVG 而不是事件

Question

我试图将按钮的值传递给函数，但是当单击按钮时，事件来自 SVG 而不是来自按钮本身，当我单击 SVG 不位于边缘的按钮时目前事件正常触发。如何使 SVG 在 onClick 中被忽略？我希望事件来自按钮而不是来自 SVG。我正在使用 Font Awesome 并通过 React 库导入图标。

JSX：

 <button className="btn-vote" value={site._id} name="1" onClick={handleVote}>{upSVG} 
 </button>

CSS：

.btn-vote {
  font-size: 1.9vw;
  background: none;
  border: none;
  height: 100%;
  width: 50%;
}

Answer 1

使用 css 属性pointer-events 为你的upSVG，那么当你点击按钮时它将被忽略。

   pointer-events: none;

希望它能解决您的问题。

否则你可以像这样调用一个函数来 stopPropagation 。

<svg onClick={e=> e.stopPropagation(); }/>