反应点击处理程序不起作用并将 on="[object Object]" 写入 DOM答案

【问题标题】：React click handler not working and writing on="[object Object]" into DOM反应点击处理程序不起作用并将 on="[object Object]" 写入 DOM
【发布时间】：2020-04-22 20:09:18
【问题描述】：

更新：这最终证明是 Babel 配置问题。

我是第一次使用 React 函数组件，并且使用事件处理程序得到了一些意想不到的结果。这是我在遇到更充实的组件问题后创建的一个大幅缩减的测试用例：

const App = () => {

  const handler = function(e) {
    e.preventDefault();
    
    console.log('handleAppClick');
  };
  
  return (
    <div onClick={ handler }>This is the whole thing.</div>
  );
};

ReactDOM.render(<App />, document.querySelector('#app'));

body {
  font-family: monospace;
}

#app {
  border: 2px solid black;
  padding: 8px;
  border-radius: 2px;
  cursor: pointer;
  user-select: none;
}

<script src="https://unpkg.com/react@16.12.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.development.js"></script>

<div id="app"></div>

我的期望/理解是，在这种情况下不需要绑定，因为处理程序中不需要 this 引用。我尝试在App 内部和外部定义处理程序，将其定义为箭头函数，将其简单地定义为function handler(e) { ... }，但在所有情况下，我都没有在渲染页面上的这个 div 上获得有效的点击处理程序，如果我检查 DOM，我可以在 div 上看到 on="[object Object]" 属性。

这里发生了什么？似乎我只是在这里遗漏了一些明显的东西。

【问题讨论】：

我不知道为什么你的例子不起作用，一切对我来说都是正确的。也许尝试内联 onClick 函数，看看它是否先以这种方式触发，然后从那里开始？
我已经更新了您的问题，包括一个可运行的 sn-p 而不是静态的。如您所见，这按预期工作，所以我认为您过度简化了代码。您能否添加一些类似于原始代码的内容？
代码工作正常
@Danziger 好吧，我并没有过度简化我发布的 JS —— 我发布的代码是从出现问题的项目中直接复制粘贴的。我正在使用一个非常简单的 Webpack 构建，以及一个完全最小的 main.js 文件来呈现应用程序组件。我想知道可能导致此问题的构建是否有问题？终端中没有错误或警告，浏览器控制台中也没有问题。
是的，如果那是原始代码，那么我怀疑问题是否存在。检查 Webpack 配置，如果你不能让它工作，也可以发布。

标签： javascript reactjs react-hooks

【解决方案1】：

这最终证明是 Babel 配置问题。感谢所有评论或提出建议的人。

【讨论】：

【解决方案2】：

我认为你必须调用处理程序而不是引用它 <div onClick={ handler() }>This is the whole thing.</div> ----> 也试试 <div onClick={ (e) => handler(e) }>This is the whole thing.</div>

【讨论】：