反应按钮 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

你有一个事件浮出水面，看这里 -

function App () {
  const handleVote = e => console.log(e)

  const stopPropagation = e => e.stopPropagation()
  return (
    <div className='App'>
      <MyComponent />
      <button
        className='btn-vote'
        value={'fdsdfsd'}
        name='1'
        onClick={handleVote}
      >
        <i onClick={stopPropagation} className='fab fa-500px'></i>
      </button>
    </div>
  )
}

Answer 2

为您的 upSVG 使用 css 属性指针事件，然后当您点击按钮时它会被忽略。

   pointer-events: none;

希望它能解决您的问题。

否则你可以像这样调用一个函数来停止传播。

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

反应按钮 onClick 引用 SVG 而不是事件

React button onClick referencing SVG and not the event

javascript

events

fonts

svg

reactjs