反应点击处理程序不起作用并写入 = "[object Object]"到 DOM 中

Question

UPDATE：这最终被证明是 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]"属性。

这是怎么回事？似乎我只是在这里错过了一些明显的东西。

Answer 1

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

Answer 2

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