JavaScript OnClick 事件的奇怪行為

Question

我有一個包含以下代碼的 React 應用程序：

<div className={ mainCss } data-appmode={ AppMode.MAIN } onClick={ this.handleAppModeClick.bind(this) }>
     <div className="NavLinkIconContainer"></div>
     <div>Main</div>
</div>

當我單擊帶有className="NavLinkIconContainer"的 div 時， handleAppModeClick function 無法正常工作。 function 觸發但不獲取 data-* 屬性。 但是，當我單擊帶有 Main 的 div 作為它的內容時，它可以完美地拾取 data-* 屬性。 為什么會這樣，我該如何解決？

Answer 1

您可以從event.currentTarget.dataset獲取data-appmode值。

• 事件 - 事件 object
• currentTarget - 具有 onClick 的元素
• dataset - 輕松訪問 data-* 值

 class Demo extends React.Component { handleAppModeClick = event => console.log(event.currentTarget.dataset.appmode); render() { return ( <div data-appmode="example" onClick={this.handleAppModeClick}> <div className="NavLinkIconContainer">NavLinkIconContainer</div> <div>Main</div> </div> ) } } ReactDOM.render( <Demo />, root )

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 2

Ori Drori 的建議會奏效。 或者，您可以將組件編寫為

<div className={ mainCss } data-appmode={ AppMode.MAIN } onClick={ ()=>this.handleAppModeClick(AppMode.MAIN) }>
 <div className="NavLinkIconContainer"></div>
 <div>Main</div>

這將使用硬編碼參數觸發 function。 在我看來，它比使用 event.currentTarget.dataset 要干凈一些。 話雖如此，我確信其他人不同意我的觀點，如果解決方案有效，它就會有效。

或者，您可以使用

 handleAppModeClick = event => console.log(event.target.getAttribute('data-appmode'));

從實際元素中獲取數據。