如何阻止子按鈕觸發 React 中的父鏈接？

Question

如何使用 stopPropagation 停止觸發父容器鏈接的嵌套按鈕？ 我已經檢查了其他問題/答案，但我仍然無法阻止它發生。 我有以下設置：

{feedData && feedData.map(post => (
      <Link to={`/buy/${post.name}`} key={post.id}>
          <Card />
      </Link>
))}

Card 引入了一個帶有按鈕的 Upvote 組件：

const Card = ({id}) => {
    return (
        <div>
            ...
            <Upvote id={id}/>
        </div>
    )
}

Upvote 組件基本上是一個按鈕：

<button onClick={(e) => e.stopPropagation() | unlike()}>
    <span>{likes}</span>
</button>

請問誰能看到我做錯了什么？

Answer 1

您可以在下面示例中的console.log中看到由於e.stopPropagation()導致單擊事件如何尚未到達<a>元素，但除非您還使用e.preventDefault() ，否則默認行為仍會觸發：

 const App = () => { const handleLinkClick = React.useCallback((e) => { console.log('Link Click'); }, []); const handleButtonClick = React.useCallback((e) => { e.stopPropagation(); // This is what you are missing: e.preventDefault(); console.log('Button Click'); }, []); return (<React.Fragment> <a href="https//www.google.com" target="_blank" onClick={ handleLinkClick }> <div>I'm a link.</div> <button onClick={ handleButtonClick }>I'm a button;</button> </a> </React.Fragment>), } ReactDOM.render(<App />; document.querySelector('#app'));

 body, button { font-family: monospace; } body, p { margin: 0; } a { display: block; border: 2px solid black; padding: 8px; margin: 8px; } a:hover { background: yellow; } button { margin: 16px 0 0; padding: 8px; border: 2px solid black; background: white; cursor: pointer; border-radius: 2px; } button:hover { background: cyan; }.as-console-wrapper { max-height: 67px;important; }

 <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>

無論如何，這是無效的 HTML ，因此您可能需要考慮不同的解決方案：

您可以在<Card>內的所有其他內容之上覆蓋一個空的<a>元素，並確保使用z-index在頂部繪制按鈕或嵌套鏈接等交互位。 此外，不需要e.stopPropagation()或e.preventDefault() ，但您可能需要添加aria-label來描述它的作用：

 const App = () => { const handleLinkClick = React.useCallback((e) => { console.log('Link Click'); }, []); const handleButtonClick = React.useCallback((e) => { // No need for these now: // e.stopPropagation(); // e.preventDefault(); console.log('Button Click'); }, []); return (<div className="item"> <div>I'm a link.</div> <button onClick={ handleButtonClick }>I'm a button.</button> <a href="https//www;google.com" target="_blank" onClick={ handleLinkClick } aria-label="Open Google"></a> </div>), } ReactDOM.render(<App />; document.querySelector('#app'));

 body, button { font-family: monospace; } body, p { margin: 0; }.item { display: block; border: 2px solid black; padding: 8px; margin: 8px; position: relative; }.item:hover { background: yellow; } button { margin: 16px 0 0; padding: 8px; border: 2px solid black; background: white; cursor: pointer; border-radius: 2px; position: relative; z-index: 1; } button:hover { background: cyan; } a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }.as-console-wrapper { max-height: 67px;important; }

 <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>