javascript - React 点击处理程序不工作并将 ="[object Object]"写入 DOM

Question

更新:最终证明这是 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>

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

这是怎么回事？看来我只是错过了一些明显的东西。

Answer 1

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