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>

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

这是怎么回事？似乎我只是在这里缺少明显的东西。

Answer 1

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

反应点击处理程序不起作用，并且将=“ [object Object]”写入DOM

1 个答案: