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'));

从实际元素中获取数据。