反應按鈕 onClick 引用 SVG 而不是事件

Question

我正在嘗試將按鈕的值傳遞給 function，但是當單擊按鈕時，事件來自 SVG 而不是來自按鈕本身，當我單擊邊緣右側的按鈕時，ZCD15A3475C2603F0649A 不是目前事件正常觸發。 如何使 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

你有一個事件浮出水面，看這里 - https://stackoverflow.com/questions/35914680/how-to-call-stoppropagation-in-reactjs，

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 ，然后單擊按鈕時將忽略它。

   pointer-events: none;

希望它能解決您的問題。

否則，您可以像這樣調用 function 來停止傳播。

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